การทําภาพสไลด์บนเว็บ รูปภาพสไลด์บนเว็บ

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

ตัวอย่าง การทําภาพสไลด์บนเว็บ รูปภาพสไลด์บนเว็บ

1. ติดตั้ง CSS slick โดยการวางโค้ด CDN ด้านล่างไว้ภายในแท็ก 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"/>

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

<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>

3. เขียนโค้ดการทําภาพสไลด์บนเว็บไซต์ สไลด์ทั้งหมด 3 รูปภาพ

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

<script>
  $(document).ready(function(){
    $('.slide').slick({
      infinite: true,
      autoplay: true
    });  
  });
</script>