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
- It is impossible to add a non nullable field without specifying a default. Django error
- ImportError: cannot import name 'url' from 'django.conf.urls' - Django Error
- How to Enable Virtualization in BIOS Security Settings in Intel Processors For Android Studio?
- Dependency 'androidx.activity:activity:1.8.0' requires libraries and applications that depend on it.
- AttributeError: 'NoneType' object has no attribute 'get_text' - Python
- ModuleNotFoundError: No module named 'openpyxl' - Python
- How to get thumbnail from vimeo video URL in Python?
- Remove all special characters, punctuation except spaces from string - Python
Related Article