แสดงรูปภาพแบบไสลโดย Orbit: A Slick jQuery Image Slider Plugin

Orbit เป็น Jquery Plugin อีกตัวที่ทำการแสดง Slide ได้ ที่นำมาเสนอนี่ก็ถือว่าเป็นทางเลือก
อีกทางนึง การใช้งานก็แสนง่าย

1.ใส่ Code นี้ไว้ที่ส่วน head

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>

เรียกใช้งานด้วย

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>

2.ใส่ css

<link rel="stylesheet" href="css/orbit.css">

3.ใส่รูป

<div id="featured"> 
     <img src="link.jpg" title="Link galliantly riding the majestic Epona across the hyrulian plains" alt="Link" />
     <img src="ezio.jpg"  alt="Ezio" />
     <img src="masterchief.jpg" title="Master Chief surveying Reach, home of his upcoming game"  alt="Master Chief" />
     <img src="marcusfenix.jpg"  alt="Marcus Fenix" />
</div> 

4.Option อื่น

$('#featured').orbit({          
     animation: 'fade', //fade, horizontal-slide, vertical-slide
     animationSpeed: 800, //how fast animations are
     advanceSpeed: 4000, //if timer advance is enabled, time between transitions 
     startClockOnMouseOut: true, //if timer should restart on MouseOut
     startClockOnMouseOutAfter: 3000, //how long after mouseout timer should start again
     directionalNav: true, //manual advancing directional navs
     captions: true, //if has a title, will be placed at bottom
     captionAnimationSpeed: 800, //how quickly to animate in caption on load and between captioned and uncaptioned photos
     timer: false //if the circular timer is wanted
});

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.zurb.com/playground/jquery_image_slider_plugin