This tutorial will teach you how to create an auto-playing slider using jQuery, HTML, and CSS.
Auto-Playing Slider in jQuery
First, let’s create the HTML code. Note that you will have to replace the images below with images of your choice.
<div class="container">
<div id="MySlideShow">
<div style="width: 50px">
<img src="\images\1.jpg">
</div>
<div>
<img src="\images\2.jpg">
</div>
<div>
<img src="\images\3.jpg">
</div>
</div>
</div>
Now, add the CSS class below to your HTML file or a separate file if you prefer.
<style>
#MySlideShow {
margin: 50px 50px 50px 50px;
position: relative;
width: 250px;
height: 250px;
}
#MySlideShow > div {
position: absolute;
}
#MySlideShow > div > img {
width: 300px;
height: 300px;
}
</style>
And, the jQuery code, which will wait to fade out an image, then fades in the next one.
<script>
$(document).ready(function () {
$("#MySlideShow > div:gt(0)").hide();
setInterval(function () {
$('#MySlideShow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#MySlideShow');
}, 5000);
});
</script>
Output
After running your application, the output should be similar to the Slider below:
