โดย 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(255).png (3.4 KiB) Viewed 1649 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 (16.61 KiB) Viewed 1635 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
ในการสร้าง [url=https://www.mindphp.com/forums/viewtopic.php?f=73&t=52798]Slide show (สไลด์โชว์ คือ)[/url] เป็นการแสดงภาพ หรือ แสดงรูปบนเว็บไซต์ ที่เราได้กำหนดไว้ว่า เราจะแสดงภาพอะไรบ้าง ในบทความนี้ เราจะมาทำวิธีสร้าง สไลด์โชว์ให้แสดง ทีล่ะหลายๆ ภาพหรือเรียกว่า Multiple items แสดงสไลด์เดียวทีล่ะหลาย ๆรุป โดยปกติแล้วสไลด์โชว์ที่เราเห็นก็จะมีหลายแบบ เช่น มีแค่ภาพเดียว ต่อ1 สไลด์ และ มี 3-4 ภาพ ต่อ 1 สไลด์ และบทความนี้จะทำ สไลด์ที่แสดงแบบ [url=https://mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2083-e-commerce-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]Ecommece[/url] ไปดูกันเลยครับ
ขั้นตอนแรก ให้เราไปที่เว็บ https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/ เพื่อดาวโหลด Plug in ครับ
[attachment=2]Selection_999(254).png[/attachment]
ต่อมาให้ทำการ นำไฟล์ ที่โหลดไว้ไปใน โฟลเดอร์งานของเราที่ต้องการจะทำนะครับ
[attachment=1]Selection_999(255).png[/attachment]
หลังจากนั้น ในโค๊ดของโปรแกรม
1. ให้เรียกใช้ไฟล์ script CSS ที่ได้โหลดมานะครับ
[code=php]<link rel="stylesheet" href="/path/to/slick.css">
<link rel="stylesheet" href="/path/to/slick-theme.css">[/code]
2. โค้ดนี้ จะแสดงภาพ 3 ภาพในหนึ่งสไลด์นะครับ
[code=php] <script>
jQuery(document).ready(function(){
jQuery('.demo').slick({
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>[/code]
3. ต่อมาให้เรียกใช้ไฟล์ script Js ที่ได้โหลดมานะครับ
[code=php]<script src="/path/to/jquery.min.js">
<script src="/path/to/slick.js"> [/code]
4 หน้าแสดงผลที่ใช้นะครับ
[code=php]<div class="slider demo">
<div>
<img src="test1.jpg" />
</div>
<div>
<img src="test2.jpg" />
</div>
<div>
<img src="test3.jpg" />
</div> [/code]
ผลลัพธ์ทีไ่ด้ก็จะได้ 3 ภาพดังนี้นะครับ แต่ในนี้ มีแค่3
[attachment=0]Selection_999(263).png[/attachment]
อ้างอิง
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