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
- Fix-Gradient effect turning to gray in after effects
- How to blur an image in python?
- ModuleNotFoundError: No module named 'whois' in Python GoviralHost Without Terminal
- How to Convert Image to Pencil Sketch in Python?
- AttributeError: module 'urllib' has no attribute 'request' - Python
- How to Extract audio from video files using python?
- PermissionError: [Errno 13] Permission denied: 'shampoo_sales.csv' - Python
- [WinError 145] The directory is not empty: 'FolderPath' - Python
Related Article