Hi, today i am going to tell you about how to make the simple and easy image slideshow using jquery, it is quite simple and easy to integrate anywhere in your website, i have just used few jQuery methods to complete this simple image slideshow, you can also use this code for text also. let's see how to do this simple slide show.
now use this method $('li:gt(0)') i am hiding the images within LI tag and i used setInterval() function to slide the images with certain time duration, inside the function i am hiding first child of LI tag and showing next LI tag with next() method and after complete all images i just used end() method and appending the all images to UL tag
Live Demo
Download Script
HTML
in html take the list of images within the UL and LI tags<ul> <li><img src="g.jpg" width="560" height="300"></li> <li><img src="a.jpg" width="560" height="300"></li> <li><img src="b.jpg" width="560" height="300"></li> <li><img src="c.jpg" width="560" height="300"></li> <li><img src="d.jpg" width="560" height="300"></li> <li><img src="e.jpg" width="560" height="300"></li> <li><img src="f.jpg" width="560" height="300"></li> </ul>
CSS
in css give the margin and padding's to be 0 and set the UL position to relative and to LI tag set the position to absolute and make the top and left positions to 0<style> ul{list-style:none; margin:0; padding:0; position:relative;} li{width:560px; height:300px; margin:1px; position:absolute; top:0; left:0;} </style>
JAVASCRIPT
here i have just used few jQuery animation and siblings methods, here first what i did is i used gt() method gt means (greater than) the usage of this method is select the all elements with in an index number higher than a given a specified number and the index number start with 0now use this method $('li:gt(0)') i am hiding the images within LI tag and i used setInterval() function to slide the images with certain time duration, inside the function i am hiding first child of LI tag and showing next LI tag with next() method and after complete all images i just used end() method and appending the all images to UL tag
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $('li:gt(0)').hide(); setInterval(function(){ $('li:first-child').fadeOut().next('li').fadeIn().end().appendTo('ul'); },3000); }); </script>
thanx ..that is what i was searching for..
ReplyDeletegreat article..
ReplyDeletehow to add next previous button there
ReplyDeletecool n simple script.
ReplyDeletematursuwun mas ...?
ReplyDeletesimple and nice share... thanks
ReplyDelete