การสร้างเว็บไซต์ด้วย Joomla จะมีโมดูลหรือส่วนเสริมเพื่อเพิ่มประสิทธิภาพให้กับ Joomla ซึ่งหนึ่งในนั้นก็มี Module Carousel ที่จะช่วยสร้าง SlideShow สำหรับรูปภาพหรือข้อความในเว็บไซต์เพื่อเพิ่มความสวยงามและน่าสนใจในการนำเสนอสินค้าหรือข้อความต่างๆ บทความนี้จึงเป็นการแนะนำวิธีการสร้าง SlideShow ง่ายๆเพียงไม่กี่ขั้นตอนดังนี้
วิธีสร้าง SlideShow ด้วย Bootstrap 3
1.เข้า localhost ในส่วนของผู้ดูแลระบบ คลิกที่เมนู Extensions เลือก Modules
2.คลิก New
3.เลือก Module Carousel
4.ตั้งชื่อ Module ในช่อง Title ในส่วน Show Title เลือก Hide , Position กำหนดตำแหน่ง , Status เลือก Published
5.คลิก Select เพื่อใส่รูปภาพ
6.เลือกรูปภาพแล้วคลิก Insert
7.ในช่อง Article เป็นการ Link ไปอีกหน้าหนึ่งเมื่อคลิกที่รูปภาพ ให้ใส่ Link หน้าที่ต้องการในช่องนี้ จากนั้นคลิก Save & Close
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.ตรวจสอบการแสดงผลในหน้าเว็บไซต์
เนื้อหาเพิ่มเติม
