In this article, I will show you how to create jQuery image slider example. Without using external plugin create your own slider as it’s not much difficulty, which is so easy. You need to reference a jQuery plugin to your Html page.
Create a simple two css class active and inactive and create a div tag as named divslider. Inside the div tag and create list of image for simple slideshow. For every image, add the css class. Now, we need to just hide and show each image one by one sequentially.
Image slider jQuery code:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setInterval(function () {
SlideClass();
}, 4000);
});
function SlideClass() {
var currentActiveImage = $("img.active").attr("id");
$("#" + currentActiveImage).removeClass("active");
$("#" + currentActiveImage).addClass("inactive");
$("#" + currentActiveImage).next().removeClass("inactive");
$("#" + currentActiveImage).next().addClass("active");
//Check for the last image, then set first image as active
var CheckThisLastImage = $("#" + currentActiveImage).next().length;
if (CheckThisLastImage == 0) {
$('#divslider img').first().removeClass('inactive');
$('#divslider img').first().addClass('active');
}
}
</script>
<style type="text/css">
.active {
width: 100%;
height: 300px;
}
.inactive {
display: none;
}
</style>
<h2 style="text-align:center;color:#055996">Jqueryimage slideshow</h2>
<div style="width: 40%; margin: auto; height: 300px;" id="divslider">
<img src="UploadFiles/Koala.jpg" class="active" id="img1" />
<img src="UploadFiles/Lighthouse.jpg" class="inactive" id="img2" />
<img src="UploadFiles/Penguins.jpg" class="inactive" id="img3" />
<img src="UploadFiles/Tulips.jpg" class="inactive" id="img4" />
</div>
jQuery image slider demo:
Post your comments / questions
Recent Article
- 'ionic' is not recognized as an internal or external command
- OSError: cannot open resource - Python
- Python read file line count
- How to Encode & Decode using Base64 in Python?
- Unspecified error-The function is not implemented. Rebuild the library with Windows, GTK+ 2.x or Cocoa support.
- How to generate a Captcha verification code image with Python?
- How to show an image using path python PIL?
- How to remove Background from the images using Python?
Related Article