Currently, I am in the process of creating a slideshow for my homepage banner. In order to achieve this, I have integrated jquery plugins such as localscroll.js
and scrollTo.js
.
Below is the Javascript code that I am using:
$(document).ready(function() {
$("#slideshow").css("overflow", "hidden");
$("#slideshow-nav").css("visibility", "visible");
$("#slideshow-nav a[href=#oron5]").addClass("active");
$("#slideshow-nav").localScroll({
target:'#slideshow', axis: 'x'
});
$("#slideshow-nav a").click(function(){
$("#slideshow-nav a").removeClass("active");
$(this).addClass("active");
});
});
At the moment, I have to manually click on navigation buttons to view different images. Is there a way for the images to change automatically after a certain period of time?
You can find the current progress of my work on this FIDDLE.
If anyone could provide assistance in resolving this issue, it would be greatly appreciated. Thank you.