SIMPLE AUTO SLIDER


One of my friends asked me to good auto sliding plugin for putting his photos in his blog. I replied him not to link any third party plugin and designed him a simple jquery and the demo is given below. In my opinion, simple jquery auto slider is better option than using third party plugin to have better control on all elements.


Three things to be kept in mind while designing the code.
1)   Direction of moving - Here the images goes in left direction. If you want top direction, put marginTop: -300 inplace of marginLeft:-600; and marginTop:0 inplcae of marginLeft:0.
2)   Moving speed - This is the time taken for each image to move. Here the time taken to move a certain image is 1000 (i.e 1 second). You may enhance / decrease the value.
3)   setInterval function - this keeps image for a certain period. Here the time is 5000; You may change the time as you wish. The unit is milleseconds.

CSS CODE (in header):
<style type="text/css"> #slide { width: 675px; height: 300px; overflow: hidden; border: 1px solid blue; } #slide ul { width: 2400px; padding:0; margin:0; } #slide ul li { list-style: none;float: left; } </style>
SCRIPT CODE (in header):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var t = setInterval(function(){ // Set the interval to be 5 seconds $("#slide ul").animate({marginLeft:-680},1000,function(){ // This code runs after the animation completes $(this).find("li:last").after($(this).find("li:first")); // Now we've taken out the left-most list item, reset the margin $(this).css({marginLeft:0}); }) },5000); }); </script>
HTML CODE (in body):
<div id="slide"> <ul> <li><img src="http://wwww.xxx.com/abc1.jpg"/></li> <li><img src="http://wwww.xxx.com/abc2.jpg"/></li> <li><img src="http://wwww.xxx.com/abc3.jpg"/></li> <li><img src="http://wwww.xxx.com/abc4.jpg"/></li> </ul> </div>

No comments:

Click Here To add Comment

Post a Comment