ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

            การสร้างเว็บไซต์ด้วย Joomla จะมีโมดูลหรือส่วนเสริมเพื่อเพิ่มประสิทธิภาพให้กับ Joomla ซึ่งหนึ่งในนั้นก็มี Module Carousel ที่จะช่วยสร้าง SlideShow สำหรับรูปภาพหรือข้อความในเว็บไซต์เพื่อเพิ่มความสวยงามและน่าสนใจในการนำเสนอสินค้าหรือข้อความต่างๆ บทความนี้จึงเป็นการแนะนำวิธีการสร้าง SlideShow ง่ายๆเพียงไม่กี่ขั้นตอนดังนี้

วิธีสร้าง SlideShow ด้วย Bootstrap 3

1.เข้า localhost ในส่วนของผู้ดูแลระบบ คลิกที่เมนู Extensions เลือก Modules

เข้า localhost ในส่วนของผู้ดูแลระบบ คลิกที่เมนู Extensions เลือก Modules
เข้า localhost ในส่วนของผู้ดูแลระบบ คลิกที่เมนู Extensions เลือก Modules

 

2.คลิก New 

คลิก New
คลิก New

 

3.เลือก Module Carousel

เลือก Module Carousel
เลือก Module Carousel

 

4.ตั้งชื่อ Module  ในช่อง Title ในส่วน Show Title เลือก Hide  , Position กำหนดตำแหน่ง , Status เลือก Published 

ตั้งชื่อ Module  ในช่อง Title ในส่วน Show Title เลือก Hide  , Position กำหนดตำแหน่ง , Status เลือก Published
ตั้งชื่อ Module ในช่อง Title ในส่วน Show Title เลือก Hide , Position กำหนดตำแหน่ง , Status เลือก Published

 

5.คลิก Select เพื่อใส่รูปภาพ

คลิก Select เพื่อใส่รูปภาพ
คลิก Select เพื่อใส่รูปภาพ

 

6.เลือกรูปภาพแล้วคลิก Insert 

เลือกรูปภาพแล้วคลิก Insert
เลือกรูปภาพแล้วคลิก Insert

 

7.ในช่อง Article เป็นการ Link ไปอีกหน้าหนึ่งเมื่อคลิกที่รูปภาพ ให้ใส่ Link หน้าที่ต้องการในช่องนี้ จากนั้นคลิก Save & Close

ใส่ Link หน้าที่ต้องการให้แสดงเมื่อคลิกที่รูปภาพ
ใส่ Link หน้าที่ต้องการให้แสดงเมื่อคลิกที่รูปภาพ

 

8.ในโปรแกรม Netbeans แทรกโค้ดด้านล่างนี้ลงในไฟล์ index.php ในบรรทัดที่สอง โค้ดตรงส่วน name=" " ให้ใส่ชื่อ position แล้ว Save

<div id="common-home" class="container">      
        <jdoc:include type="modules" name="banner" style="xhtml" /> 
<div class="swiper-viewport">
            <div id="carousel0" class="swiper-container swiper-container-horizontal">
                <div class="swiper-wrapper" style="transform: translate3d(-3169.6px, 0px, 0px); transition-duration: 0ms;"><div class="swiper-slide text-center swiper-slide-duplicate" data-swiper-slide-index="6" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/harley-130x100.png" alt="Harley Davidson" class="img-responsive"></div><div class="swiper-slide text-center swiper-slide-duplicate" data-swiper-slide-index="7" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/dell-130x100.png" alt="Dell" class="img-responsive"></div><div class="swiper-slide text-center swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="8" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/disney-130x100.png" alt="Disney" class="img-responsive"></div><div class="swiper-slide text-center swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="9" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/starbucks-130x100.png" alt="Starbucks" class="img-responsive"></div><div class="swiper-slide text-center swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="10" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/nintendo-130x100.png" alt="Nintendo" class="img-responsive"></div>      <div class="swiper-slide text-center" data-swiper-slide-index="0" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/nfl-130x100.png" alt="NFL" class="img-responsive"></div>
                    <div class="swiper-slide text-center" data-swiper-slide-index="1" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/redbull-130x100.png" alt="RedBull" class="img-responsive"></div>
                    <div class="swiper-slide text-center" data-swiper-slide-index="2" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/sony-130x100.png" alt="Sony" class="img-responsive"></div>
                    <div class="swiper-slide text-center" data-swiper-slide-index="3" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/cocacola-130x100.png" alt="Coca Cola" class="img-responsive"></div>
                    <div class="swiper-slide text-center" data-swiper-slide-index="4" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/burgerking-130x100.png" alt="Burger King" class="img-responsive"></div>
                    <div class="swiper-slide text-center" data-swiper-slide-index="5" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/canon-130x100.png" alt="Canon" class="img-responsive"></div>
                    <div class="swiper-slide text-center" data-swiper-slide-index="6" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/harley-130x100.png" alt="Harley Davidson" class="img-responsive"></div>
                    <div class="swiper-slide text-center" data-swiper-slide-index="7" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/dell-130x100.png" alt="Dell" class="img-responsive"></div>
                    <div class="swiper-slide text-center swiper-slide-prev" data-swiper-slide-index="8" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/disney-130x100.png" alt="Disney" class="img-responsive"></div>
                    <div class="swiper-slide text-center swiper-slide-active" data-swiper-slide-index="9" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/starbucks-130x100.png" alt="Starbucks" class="img-responsive"></div>
                    <div class="swiper-slide text-center swiper-slide-next" data-swiper-slide-index="10" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/nintendo-130x100.png" alt="Nintendo" class="img-responsive"></div>
                    <div class="swiper-slide text-center swiper-slide-duplicate" data-swiper-slide-index="0" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/nfl-130x100.png" alt="NFL" class="img-responsive"></div><div class="swiper-slide text-center swiper-slide-duplicate" data-swiper-slide-index="1" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/redbull-130x100.png" alt="RedBull" class="img-responsive"></div><div class="swiper-slide text-center swiper-slide-duplicate" data-swiper-slide-index="2" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/sony-130x100.png" alt="Sony" class="img-responsive"></div><div class="swiper-slide text-center swiper-slide-duplicate" data-swiper-slide-index="3" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/cocacola-130x100.png" alt="Coca Cola" class="img-responsive"></div><div class="swiper-slide text-center swiper-slide-duplicate" data-swiper-slide-index="4" style="width: 226.4px;"><img src="http://localhost/opencart/upload/image/cache/catalog/demo/manufacturer/burgerking-130x100.png" alt="Burger King" class="img-responsive"></div></div>
            </div>
            <div class="swiper-pagination carousel0 swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span></div>
            <div class="swiper-pager">
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
</div>

 

9.ตรวจสอบการแสดงผลในหน้าเว็บไซต์

แสดงผล Slide ในหน้าเว็บ
แสดงผล Slide ในหน้าเว็บ

 

เนื้อหาเพิ่มเติม

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อยากทราบวิธีการ แบบคอลัมเป็น 3 คอลีม โดยใช้ tag <dl>
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 11:56 am บอร์ด HTML CSS
0
3
จ 25 พฤษภาคม 2020 11:56 am โดย Ittichai_chupol
บันทึกประชุม มารียา ซีฟู้ดส์
โดย thatsawan จ 25 พฤษภาคม 2020 11:40 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
1
จ 25 พฤษภาคม 2020 11:40 am โดย thatsawan
10 สุดยอดสตรีทฟู้ดในแอฟริกาตะวันตก
โดย Anonymous อ 24 พฤษภาคม 2020 9:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
อ 24 พฤษภาคม 2020 9:58 pm โดย บุคคลทั่วไป
ข้อมูลสำหรับทำระบบ
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดดความคืบหน้า / Progress - มารียา ซีฟู้ดส์
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดด Template เว็บไซต์ FDD (V2)
โดย mindphp อ 24 พฤษภาคม 2020 3:51 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:51 am โดย mindphp
R - ปรับกราฟฟิก ของเว็บ FDD
โดย mindphp อ 24 พฤษภาคม 2020 3:50 am บอร์ด FDD (Main)
0
2
อ 24 พฤษภาคม 2020 3:50 am โดย mindphp
ความคืบหน้า / Progress
โดย mindphp อ 24 พฤษภาคม 2020 3:46 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:46 am โดย mindphp
VDO - SP Page builder
โดย numtan5839 ศ 22 พฤษภาคม 2020 6:27 pm บอร์ด SP Page Builder Thai Edition - Manual & VDO & เทคนิคการใช้งาน
1
7
ศ 22 พฤษภาคม 2020 7:00 pm โดย mindphp
วิธีการใช้ Google Tasks แอพจัดการบันทึกสิ่งที่ต้องทำ
โดย sirirat ศ 22 พฤษภาคม 2020 11:04 am บอร์ด Share Knowledge
0
43
ศ 22 พฤษภาคม 2020 11:04 am โดย sirirat
งานประจำวันที่ 22 พฤษภาคม 2563
โดย sirirat ศ 22 พฤษภาคม 2020 10:10 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
1
15
ศ 22 พฤษภาคม 2020 11:22 am โดย numtan5839
สรุปการเรียนรู้ประจำวัน 21/05/63
โดย sirirat ศ 22 พฤษภาคม 2020 10:08 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
3
ศ 22 พฤษภาคม 2020 10:08 am โดย sirirat
รายงานความคืบหน้า / Process
โดย mindphp ศ 22 พฤษภาคม 2020 1:07 am บอร์ด SP Page Builder Thai Edition (Main)
1
3
ศ 22 พฤษภาคม 2020 1:34 am โดย mindphp
ส่ง site map ให้ google แต่ไม่โชว์ในเมนูบนเว็บเรา จะมีผลอะไรกับเว็บไหมครับ
โดย toonytoony2004 พฤ 21 พฤษภาคม 2020 10:17 pm บอร์ด Joomla Development
6
73
ส 23 พฤษภาคม 2020 10:56 pm โดย toonytoony2004
B - เวลาของบอร์ดไม่ตรงเวลาไทย
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:19 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 5:19 pm โดย thatsawan
B - ข้อความแนะนำตัว ของผู้สมัครไม่แสดงใน บริษัทที่เปิดรับ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:18 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 5:18 pm โดย thatsawan
R - [email Formart-หาคน] เเจ้งเมื่อมีคนสมัครงานใน Odoojob
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:12 pm บอร์ด Odoojob.com - Manual & Content
0
1
พฤ 21 พฤษภาคม 2020 5:12 pm โดย thatsawan
B - บริษัทหาคน ต้องการเปลี่ยน Email รับสมัครงานหาทางเข้าไม่เจอ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:07 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 5:07 pm โดย thatsawan
R - [email Formart-หางาน] หลังสมัครงาน บน Odoojob
โดย thatsawan พฤ 21 พฤษภาคม 2020 4:57 pm บอร์ด Odoojob.com - Manual & Content
0
5
พฤ 21 พฤษภาคม 2020 4:57 pm โดย thatsawan
ทำไมสมัครสมาชิกแล้วเข้าสู่ระบบไม่ได้??
โดย sirirat พฤ 21 พฤษภาคม 2020 4:56 pm บอร์ด MindPHP News & Feedback
0
44
พฤ 21 พฤษภาคม 2020 4:56 pm โดย sirirat