การทำรูปภาพสไลด์เป็นที่นิยมเนื่องจากมีความสวยงามแล้วยังประหยัดพื้นที่การแสดงผลรูปภาพอีกด้วย โดยในบทความนี้ผมแนะนำการใช้งาน 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
1 2 3 4 |
<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>
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(window).load(function () { $('#slider').nivoSlider({ pauseTime: 10000 }); }); </script> |
2. เพิ่ม html รูปภาพ
1 2 3 4 5 6 7 8 9 |
<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 ด้านล่างได้เลยครับ