ผมเคยเขียนบทความแนะนำการใช้งาน 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
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
Programmer, Blogger
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
