ผมเคยเขียนบทความแนะนำการใช้งาน jQuery Slide ไว้ที่นี่

1. Slideviewer ฟ้าสั่งข้ามาเกิด
2. S3slide ภาพเลื่อนสุดขอบโลก

ตัว Slideviewer ไม่เลื่อนอัตโนมัติ ส่วนตัว S3slide ไม่มีลิ้งก์ให้คลิกเลื่อนภาพ มันเลื่อนของมันเอง  ซึ่งอันที่จริง ทั้งสองตัวมันก็ทำหน้าที่ของมันสมบูรณ์แล้วล่ะ แต่มีบางท่านที่อยากได้แบบที่คุณสมบัติทั้งสองตัวนี้รวมกัน คือ เลื่อนภาพอัตโนมัติ และมีลิ้งก์ให้คลิกเลือกภาพที่อยากดู

Easy Slider 1.7 – Numeric Navigation jQuery Slider

ช่วยท่านได้ แถมคลิกภาพเพื่อไปยังลิ้งก์ต่างๆได้ด้วย เหมาะแก่การนำปลั๊กอินตัวนี้ไปทำ สไลด์โชว์สินค้า หรือโปรโมชั่น หรืออะไรนอกเหนือจากนี้ที่ท่านเห็นสมควร หรือจะทำแค่เพื่อความสวยงาม ก็ยังได้ ไม่ผิดผีแต่ประการใด ลองชมตัวอย่างก่อนละกัน ซึ่งโค้ดตัวนี้เซตค่าให้แสดงได้ 2 แบบ

Live Demo 1 | Live Demo 2

ภาพตัวอย่าง easy slider

ภาพตัวอย่าง easy slider

ว่าแล้วก็มาดูวิธีการใช้งานกันครับ

1. ดาวน์โหลดโค้ดมาก่อน

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

Easy Slider jquery slide Live Demo slide slide show
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ