ผมเคยเขียนบทความแนะนำการใช้งาน jQuery Slide ไว้ที่นี่
1. Slideviewer ฟ้าสั่งข้ามาเกิด
2. S3slide ภาพเลื่อนสุดขอบโลก
ตัว Slideviewer ไม่เลื่อนอัตโนมัติ ส่วนตัว S3slide ไม่มีลิ้งก์ให้คลิกเลื่อนภาพ มันเลื่อนของมันเอง ซึ่งอันที่จริง ทั้งสองตัวมันก็ทำหน้าที่ของมันสมบูรณ์แล้วล่ะ แต่มีบางท่านที่อยากได้แบบที่คุณสมบัติทั้งสองตัวนี้รวมกัน คือ เลื่อนภาพอัตโนมัติ และมีลิ้งก์ให้คลิกเลือกภาพที่อยากดู
Easy Slider 1.7 – Numeric Navigation jQuery Slider
ช่วยท่านได้ แถมคลิกภาพเพื่อไปยังลิ้งก์ต่างๆได้ด้วย เหมาะแก่การนำปลั๊กอินตัวนี้ไปทำ สไลด์โชว์สินค้า หรือโปรโมชั่น หรืออะไรนอกเหนือจากนี้ที่ท่านเห็นสมควร หรือจะทำแค่เพื่อความสวยงาม ก็ยังได้ ไม่ผิดผีแต่ประการใด ลองชมตัวอย่างก่อนละกัน ซึ่งโค้ดตัวนี้เซตค่าให้แสดงได้ 2 แบบ
ว่าแล้วก็มาดูวิธีการใช้งานกันครับ
2. เริ่มเขียนโค้ดกัน
include ไฟล์ js และ css ที่จำเป็นเข้ามา ในส่วน head
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider1.7.js"></script> <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" /> |
จากนั้นเขียนโครงสร้าง html ของ slide ซึ่งเป็นโครงสร้างง่ายมากๆ 1 li จะเท่ากับ 1 slide
<div id="slider"> <ul> <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li> </ul> </div> |
ขั้นตอนสุดท้าย เขียน javascript แปลงโครงสร้าง html ให้เป็น slide อันตระการตา
<script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); </script> |
auto : คือให้ slide ของเราเลื่อนเองอัตโนมัติ
continuous : คือ ให้เลื่อนไปเรื่อยๆ เมื่อแสดงไปถึงอันสุดท้ายก็ให้วนไป อันที่ 1 ต่อ วันไปอย่างนี้
มันยังมีค่า options ให้ท่านเลือกเซตอีกเพียบที่นี่ http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider ไม่ว่าจะเป็นการกำหนดความเร็วในการแสดงสไลด์แต่ละอัน หรือกำหนดค่าหน่วงเวลาก่อนที่จะแสดงไสลด์อันถัดไป
โค้ดทั้งหมดจะเป็นดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Easy Slider jQuery Plugin Demo</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider1.7.js"></script> <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); </script> </head> <body> <div id="slider"> <ul> <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li> </ul> </div> </body> </html> |
สิ่งหนึ่งที่ต้องจำไว้ก็คือว่า เมื่อท่านนำไปใช้งานจริง อาจจะต้องมีการปรับแต่ง css ใน css/screen.css
ข้อมูลเพิ่มเติม : http://cssglobe.com