ขั้นตอนแรก ให้เราไปที่เว็บ https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/ เพื่อดาวโหลด Plug in ครับ ต่อมาให้ทำการ นำไฟล์ ที่โหลดไว้ไปใน โฟลเดอร์งานของเราที่ต้องการจะทำนะครับ หลังจากนั้น ในโค๊ดของโปรแกรม
1. ให้เรียกใช้ไฟล์ script CSS ที่ได้โหลดมานะครับ
โค้ด: เลือกทั้งหมด
<link rel="stylesheet" href="/path/to/slick.css">
<link rel="stylesheet" href="/path/to/slick-theme.css">
โค้ด: เลือกทั้งหมด
<script>
jQuery(document).ready(function(){
jQuery('.demo').slick({
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
โค้ด: เลือกทั้งหมด
<script src="/path/to/jquery.min.js">
<script src="/path/to/slick.js">
โค้ด: เลือกทั้งหมด
<div class="slider demo">
<div>
<img src="test1.jpg" />
</div>
<div>
<img src="test2.jpg" />
</div>
<div>
<img src="test3.jpg" />
</div>
1 https://www.jqueryscript.net/slider/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick.html
2 https://www.w3schools.com/howto/howto_js_slideshow.asp
3 https://www.coderomeos.org/magento-featured-product-slider-on-homepage