So i have this banner slider that moves on click of a trigger.
How can I get this to automatically slide from one banner to the next automatically after a few seconds yet still keep the click feature too.
I’ve looked into using setInterval but i just cant figure out how to tweak this code to work how i want.
Thank you.
$(document).ready(function() {
$(".folio_block").each(function() {
//Set Default State of each portfolio piece
$(this).find(".paging").show();
$(this).find(".paging a:last").addClass("active");
//Inject <span> for Tool tip
$(this).find(".image_reel a").append("<span></span>");
$(this).find(".image_reel span").css({"opacity" : "0"});
//Get size of images, how many there are, then determin the size of the image reel.
var windowWidth = $(this).find(".image_reel span").width();
var imageSum = $(this).find(".image_reel img").size();
var imageReelWidth = windowWidth * imageSum;
//Adjust the image reel to its new size
$(this).find(".image_reel").css({'width' : imageReelWidth});
});
//Hover Effect for Tooltip
$(".image_reel a").hover(function() {
$(this).find("span").stop().animate({ opacity: 0.2}, 200 ).show();
}, function() {
$(this).find("span").stop().animate({ opacity: 0}, 200 );
});
//Pagin events
$(".paging a").click(function() {
var triggerID = $(this).attr("rel") - 1;
alert (triggerID);
var imgWidth = $(this).parent().parent().find("img").width();
var image_reelPosition = triggerID * imgWidth;
//Ignore if Active
if ( $(this).hasClass("active")) {
//Do Nothing
}
else {
//Set active paging
$(this).parent().parent().find(".paging a").removeClass("active");
$(this).addClass("active");
//image_reel Image
$(this).parent().parent().find(".image_reel").animate({
left: -image_reelPosition
}, 300 );
}
return false;
});
});