วิธีสร้าง Slide Show แสดงสินค้า แบบ Ecommerce โดยใช้ CSS และ Js ของ jQuery Slick Demos

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

Patipat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 996
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

วิธีสร้าง Slide Show แสดงสินค้า แบบ Ecommerce โดยใช้ CSS และ Js ของ jQuery Slick Demos

โพสต์ที่ยังไม่ได้อ่าน โดย Patipat »

ในการสร้าง Slide show (สไลด์โชว์ คือ) เป็นการแสดงภาพ หรือ แสดงรูปบนเว็บไซต์ ที่เราได้กำหนดไว้ว่า เราจะแสดงภาพอะไรบ้าง ในบทความนี้ เราจะมาทำวิธีสร้าง สไลด์โชว์ให้แสดง ทีล่ะหลายๆ ภาพหรือเรียกว่า Multiple items แสดงสไลด์เดียวทีล่ะหลาย ๆรุป โดยปกติแล้วสไลด์โชว์ที่เราเห็นก็จะมีหลายแบบ เช่น มีแค่ภาพเดียว ต่อ1 สไลด์ และ มี 3-4 ภาพ ต่อ 1 สไลด์ และบทความนี้จะทำ สไลด์ที่แสดงแบบ Ecommece ไปดูกันเลยครับ

ขั้นตอนแรก ให้เราไปที่เว็บ https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/ เพื่อดาวโหลด Plug in ครับ
Selection_999(254).png
ต่อมาให้ทำการ นำไฟล์ ที่โหลดไว้ไปใน โฟลเดอร์งานของเราที่ต้องการจะทำนะครับ
Selection_999(255).png
Selection_999(255).png (3.4 KiB) Viewed 1638 times
หลังจากนั้น ในโค๊ดของโปรแกรม
1. ให้เรียกใช้ไฟล์ script CSS ที่ได้โหลดมานะครับ

โค้ด: เลือกทั้งหมด

<link rel="stylesheet" href="/path/to/slick.css">
<link rel="stylesheet" href="/path/to/slick-theme.css">
2. โค้ดนี้ จะแสดงภาพ 3 ภาพในหนึ่งสไลด์นะครับ

โค้ด: เลือกทั้งหมด

 <script> 

jQuery(document).ready(function(){
  jQuery('.demo').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});
});
</script>
3. ต่อมาให้เรียกใช้ไฟล์ script Js ที่ได้โหลดมานะครับ

โค้ด: เลือกทั้งหมด

<script src="/path/to/jquery.min.js">
<script src="/path/to/slick.js"> 
4 หน้าแสดงผลที่ใช้นะครับ

โค้ด: เลือกทั้งหมด

<div class="slider demo">
  <div> 
         <img src="test1.jpg" /> 
  </div>
  <div> 
        <img src="test2.jpg" /> 
  </div>
  <div> 
       <img src="test3.jpg" /> 
  </div> 
ผลลัพธ์ทีไ่ด้ก็จะได้ 3 ภาพดังนี้นะครับ แต่ในนี้ มีแค่3
Selection_999(263).png
Selection_999(263).png (16.61 KiB) Viewed 1624 times
อ้างอิง
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
Kor ma di kub. :)
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 76