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

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

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

ภาพประจำตัวสมาชิก
Patipat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 761
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

โพสต์โดย Patipat » 10/07/2019 6:41 pm

ในการสร้าง 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) เปิดดู 86 ครั้ง


หลังจากนั้น ในโค๊ดของโปรแกรม
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) เปิดดู 72 ครั้ง


อ้างอิง
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
If you fall, let you stand. :)

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 21 และ บุคคลทั่วไป 0 ท่าน