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

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

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

User avatar
Patipat
PHP Super Hero Member
PHP Super Hero Member
Posts: 996
Joined: 10/06/2019 10:12 am

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

Postby 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) Viewed 157 times


หลังจากนั้น ในโค๊ดของโปรแกรม
1. ให้เรียกใช้ไฟล์ script CSS ที่ได้โหลดมานะครับ

Code: Select all

<link rel="stylesheet" href="/path/to/slick.css">
<
link rel="stylesheet" href="/path/to/slick-theme.css">


2. โค้ดนี้ จะแสดงภาพ 3 ภาพในหนึ่งสไลด์นะครับ

Code: Select all

 <script> 

jQuery
(document).ready(function(){
  jQuery('.demo').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});
});
</script>


3. ต่อมาให้เรียกใช้ไฟล์ script Js ที่ได้โหลดมานะครับ

Code: Select all

<script src="/path/to/jquery.min.js">
<
script src="/path/to/slick.js"


4 หน้าแสดงผลที่ใช้นะครับ

Code: Select all

<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 143 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
If you fall, let you stand. :)

Return to “PHP Knowledge”

Who is online

Users browsing this forum: No registered users and 12 guests