HTML slide ที่ละหลายภาพ หลายรูป

HTML slide ที่ละหลายภาพ หลายรูป บทความนี้สอนติดตั้ง slick เพื่อสร้างโค้ด slide ที่ละหลายภาพพร้อมกัน โดยใช้ jQuery Framework ร่วมด้วย พร้อมแสดงผลลัพธ์ออกสู่หน้าจอ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง HTML slide ที่ละหลายภาพ หลายรูป

1. ติดตั้ง slick CSS และ JS โดยการวางโค้ดด้านล่างไว้ภายในแท็ก head ของเว็บไซต์

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

2. เขียนโค้ด HTML slide ที่ละหลายภาพ จากตัวอย่างมีทั้งหมด 6 ภาพ slide ทีละ 3 ภาพ

<div class="slick-slider">
  <div class="multiple-items">
    <img src="color1.png">
    <img src="color2.png">
    <img src="color3.png">
    <img src="color1.png">
    <img src="color2.png">
    <img src="color3.png">    
  </div>
</div>

<script>
  $(document).ready(function(){
    $('.multiple-items').slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 3,
      autoplay: true
    });  
  });
</script>