รูปภาพสไลด์ด้วย Nivo Slider jQuery Plugin

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

เว็บผู้พัฒนา : http://docs.dev7studios.com/jquery-plugins/nivo-slider

ตัวอย่าง (demo)

http://sysapp.itoffside.com/slide/

การติดตั้ง
1. ดาวน์โหลด Nivo Slider jQuery Plugin ได้ที่ คลิกที่นี้เพื่อดาวน์โหลด
2. include ไฟล์ css และไฟล์ js ไว้ใน <head> ของเว็บไซต์คุณ ตามโค๊ดตัวอย่างด้านล่าง
nivo-slider

<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>

หากคุณมี jquery.min.js อยู่แล้วคุณไม่จำเป็นต้อง include จาก googleapis.com คุณสามารถ include จากไฟล์ที่มีอยู่แล้วได้โดยไฟล์ jQuery ต้องมีเวอร์ชั่น 1.7 หรือมากว่าขึ้นไป

การใช้งาน
1. ติดตั้งสคริปต์ javascript ไว้ใน <head>

<script type="text/javascript">
$(window).load(function () {
$('#slider').nivoSlider({
pauseTime: 10000
});
});
</script>

2. เพิ่ม html รูปภาพ

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="images/slide1.jpg" alt="" />
<a href="https://www.itoffside.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>
</div>

แล้วจะได้ผลลัพธ์ตามรูปภาพด้านล่าง

สำหรับบทความนี้เป็นเพียงตัวอย่างการใช้งานง่ายๆ สำหรับรูปภาพ slide สวยๆหวังว่าคงเป็นประโยชน์สำหรับหลายๆคน ถ้าหากมีคำถาม comment ด้านล่างได้เลยครับ