แนะนำ OWL Carousel โค้ดสร้างแบนเนอร์ที่ชอบที่สุดตอนนี้

OWL Carousel

สัปดาห์นี้ขอแนะนำโค้ดพร้อมใช้ครับ คุ้นๆ ว่าอ่านเจอจากเพจ Siam HTML แต่ว่าลองไปหาอีกทีแล้วหาไม่เจอแฮะ

Royal Slider

ก่อนหน้านี้ผมใช้ Royal Slider มาตลอด แม้จะไม่ฟรี แต่ก็ทันสมัยสุดๆ ในยุค 2-3 ปีที่แล้ว คือ เป็นระบบแบนเนอร์ที่สามารถใช้นิ้วปาดเลื่อนซ้ายขวาได้บนแท็บเบล็ตและมือถือ ตัวอย่างเช่นเว็บ เมเจอร์ ซีนีเพล็กซ์ ที่ทำในนาม สามย่าน เมื่อ 2 ปีที่แล้ว

bxSlider

จนปีที่แล้วมาชอบ bxSlider เพราะฟรี และโค้ดไม่รกเกินไปนัก สามารถเป็นแบนเนอร์ชิ้นเดียว หรือมีหลายชิ้นหมุนๆ วื้บๆ ต่อกันได้ (ฝรั่งเรียกการแสดงผลแบบนี้ว่า “ม้าหมุน” หรือ Carousel) มีเอาไปใช้ทำตัวอย่างงานอยู่บ้าง เช่นที่ m2014 ซึ่งมีทั้งแบบแสดงทีละชิ้น (Banner) และแสดงทีละ 3 ชิ้น (Product)

OWL Carousel

และล่าสุดปีนี้ โค้ดฟรีแต่หน้าตาดีมีสกุล OWL Carousel ใช้ง่ายอย่างคาดไม่ถึง ตั้งค่าให้แสดง “จำนวนชิ้น” ต่างกันในแต่ละขนาดหน้าจอได้ เช่น จอคอมกว้าง ก็แสดงแถวละ 5 รูป พอแท็บเบล็ตจอเล็ก ขอแสดงแถวละ 3 รูป ฯลฯ อยากรู้ให้ลองไป ดูตัวอย่าง แล้วปรับขนาด Browser เพื่อดูการตอบสนอง นับเป็น Responsive ที่ชาญฉลาดมาก

ลองดูโค้ดที่ไว้แสดงเนื้อหา/รูปภาพ ขอแค่มี div คลาส owl-carousel ครอบแค่นั้น ข้างในก็เป็น div เปล่าๆ อยากใส่อะไรก็ใส่

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>

มันทำให้เราสามารถตั้งค่า padding/margin ใน div นี้ เพื่อให้มีระยะระหว่างเนื้อหาได้ หรือถ้าอยากใส่อะไรเพิ่ม เช่น ชื่อ/ราคา ที่จะแสดงเมื่อมีการเอา mouse ไปชี้ (hover) ก็ได้

ลองดูเว็บ Gizmanlifestyle.com ที่ผมเพิ่งทำให้กับสามย่าน ใช้ OWL Carousel นี้ ร่วมกับ Woocommerce ดึงข้อมูลสินค้ามาแสดงทีละ 3 ชิ้นก็ได้ หรือดึงข้อมูลบล็อกมาแสดงทีละบล็อกก็ได้อีกเช่นกัน เลือกได้ทั้งการแสดงแบบตุ่ม (pagination) หรือแบบลูกศรซ้ายขวา (navigation)

gizman

ลองเล่นดูครับ เว็บอยู่ที่ OWL Graphic (แต่บางทีถ้าเว็บเค้าล่ม ก็ไปโหลดโค้ดที่ GitHub แทนได้ครับ)