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


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

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

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

Post by 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
ต่อมาให้ทำการ นำไฟล์ ที่โหลดไว้ไปใน โฟลเดอร์งานของเราที่ต้องการจะทำนะครับ
วิธีสร้าง Slide Show แสดงสินค้า แบบ Ecommerce  โดยใช้ CSS และ Js ของ jQuery Slick Demos Selection_999(255).png
Selection_999(255).png (3.4 KiB) Viewed 235 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
วิธีสร้าง Slide Show แสดงสินค้า แบบ Ecommerce  โดยใช้ CSS และ Js ของ jQuery Slick Demos Selection_999(263).png
Selection_999(263).png (16.61 KiB) Viewed 221 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. :)

Post Reply

Return to “PHP Knowledge”

Users browsing this forum: No registered users and 8 guests