Autoplay JQuery slideshow Using cbpFWSlider
I\'m using cbpFWSlider and it doesn\'t appear to include an option for autoplay. I\'m pretty new to Jquery and have Googled to high heaven but have yet to find a solution. i
-
$(".banner-slides").hide(); $(".banner-slides").first().show(); $(".banner-slides.visible").show(); $(".ri-arro").click(function(){ var ne = $(this).parents(".banner-container").find(".banner-slides.visible").next('.banner-slides'); var pne = $(this).parents(".banner-container").find(".pagination-box ul li.selected").next('li'); //var ne_p = $(".banner-slider.visible").prev('.banner-slider'); if(ne.length>0) { $(this).parents(".banner-container").find(".banner-slides.visible").hide().removeClass('visible'); $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected'); ne.addClass('visible').fadeIn(1000); pne.addClass('selected'); } else { $(this).parents(".banner-container").find(".banner-slides.visible").hide().removeClass('visible'); $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected'); $(this).parents(".banner-container").find(".banner-slides").first().addClass('visible').fadeIn(1000); $(this).parents(".banner-container").find(".pagination-box ul li").first().addClass('selected'); } }); $(".pagination-box li").live('click',function(){ var ele = $(this); var ind = $(".pagination-box ul li").index(ele); //alert(ind); $(this).parents('.banner').find(".banner-slides.visible").hide().removeClass('visible'); $(this).parents('.banner').find('.banner-slides').eq(ind).fadeIn(1000).addClass('visible'); $(".pagination-box ul li.selected").removeClass('selected'); $(this).addClass('selected'); }); for(i=0;i<$(".banner-slides").length;i++) { if(i==0) $(".pagination-box ul").append('<li class="selected"></li>'); else $(".pagination-box ul").append('<li></li>'); } var timer = 0; function autoslide(){ var ne = $(this).parents(".banner-container").find(".banner-slides.visible").next('.banner-slides'); var pne = $(this).parents(".banner-container").find(".pagination-box ul li.selected").next('li'); //var ne_p = $(".banner-slider.visible").prev('.banner-slider'); if(ne.length>0) { $(this).parents(".banner-container").find(".banner-slides.visible").hide().removeClass('visible'); $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected'); ne.addClass('visible').fadeIn(1000); pne.addClass('selected'); } else { $(this).parents(".banner-container").find(".banner-slides.visible").hide().removeClass('visible'); $(this).parents(".banner-container").find(".banner-slides").first().addClass('visible').fadeIn(1000); $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected'); $(this).parents(".banner-container").find(".pagination-box ul li").first().addClass('selected'); } if(timer) timer = setTimeout(function(){autoslide();}, 1000); } if($(".banner-container").hasClass('autoslide')) timer = setTimeout(function(){autoslide();}, 1000); $(".le-arro").click(function(){ var ne = $(this).parents(".banner-container").find(".banner-slides.visible").prev('.banner-slides'); //var ne_p = $(".banner-slider.visible").next('.banner-slider'); var pne = $(this).parents(".banner-container").find(".pagination-box ul li.selected").prev('li'); if(ne.length) { $(this).parents(".banner-container").find(".banner-slides.visible").fadeOut(500).removeClass('visible'); $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected'); ne.addClass('visible').fadeIn(1000); pne.addClass('selected'); } else { $(this).parents(".banner-container").find(".banner-slides.visible").fadeOut(500).removeClass('visible'); $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected'); $(this).parents(".banner-container").find(".banner-slides").last().addClass('visible').fadeIn(1000); $(this).parents(".banner-container").find(".pagination-box ul li").last().addClass('selected'); } });/****************Banner Css Start******************/ .banner { width:100%; height:598px; position:relative; overflow: hidden;-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);} .banner.app { height:500px;} .banner .banner-img {/*width:100%;*/ height:100%;} .banner .banner-text { position:absolute; top:0px; left:5%; width:55%; padding:87px 0 0 0} .banner.event-page .banner-text.black-gradient {height:100%;box-sizing: border-box;top:0; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 15%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(15%,rgba(0,0,0,0.6)), color-stop(50%,rgba(0,0,0,0.6)), color-stop(85%,rgba(0,0,0,0.6)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 15%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.6) 85%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 15%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.6) 85%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 15%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.6) 85%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 15%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.6) 85%,rgba(0,0,0,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */} .banner-text.black-gradient .event-logo { margin-bottom:10px; display:block;} .banner.app .banner-text { width:50%; padding:90px 0 0 0} .banner .banner-text h1 { font-size:35px; color:#f29200; text-transform:uppercase;} .banner.event-page .banner-text h1, .banner.event-page .banner-text h2 { color:#fff;} .banner.event-page .banner-text h1 { text-transform:none;font-family: 'Open Sans Light';} .banner.app .banner-text h1, .fix-banner .banner-text h1 { color:#f29200; text-transform:none; font-family: 'Open Sans Light';} .banner .banner-text h2 {font-family: 'Open Sans Light'; font-size:25px; color:#000;} .banner.app .banner-text h2, .fix-banner .banner-text h2 {font-family: 'Open Sans Light'; font-size:20px; color:#212121;} .watch-btn { font-size:15px; width:auto; color:#fff; padding:15px 30px; display:inline-block; margin-top:15px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; background-position-X:90%; text-transform:uppercase; background:#f29200; /*background: #f29200;*/} .watch-btn img {vertical-align: bottom;margin-left: 6px;} .banner .banner-container .le-arro {position: absolute;top: 0;bottom: 0;left: 1.5%;margin: auto;width: 31px;height: 98px;} .banner .banner-container .ri-arro {position: absolute;top: 0;bottom: 0;right: 1.5%;margin: auto;width: 31px;height: 98px;} .banner .banner-container .pagination-box { position:absolute; bottom:20px; width:100%; text-align:center;} .banner .banner-container .pagination-box ul li { display:inline-block;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px; background:#fff; width:12px; height:12px;margin:0 8px;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); cursor:pointer} .banner .banner-container .pagination-box ul li.selected { background:#91ba36} .banner .banner-sidebar { width:310px; /*height:548px;*/ padding: /*50px 0 0*/ 0; background: rgba(16,100,181,0.92); position:absolute; top:0; bottom:0; right:5%;box-sizing: border-box;} .banner .banner-sidebar .box-1 { padding: 40px 0 0 0px; border-bottom:-webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));} .banner .banner-sidebar .box-1 h3 { font-family: 'Open Sans Light'; font-size: 18px; color:#fff; text-transform: uppercase; text-align: center; font-weight: bold; letter-spacing: 0.5px;} .banner .banner-sidebar .box { padding:40px 20px; border-bottom:-webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));} .banner .banner-sidebar .box a:hover h3, .banner .banner-sidebar .box a:hover p {color:#c6f0ff} .banner .banner-sidebar .box.first-box p { background:url(../images/enterprise-icon.png) no-repeat 0 5px;} .banner .banner-sidebar .box.second-box p { background:url(../images/internal-icon.png) no-repeat 0 5px;} .banner .banner-sidebar .box.three-box p { background:url(../images/compliance-icon.png) no-repeat 0 5px;} .banner .banner-sidebar .box.first-box a:hover p { background:url(../images/enterprise-icon-hover.png) no-repeat 0 5px;} .banner .banner-sidebar .box.second-box a:hover p { background:url(../images/internal-icon-hover.png) no-repeat 0 5px;} .banner .banner-sidebar .box.three-box a:hover p { background:url(../images/compliance-icon-hover.png) no-repeat 0 5px;} .banner .banner-sidebar h3 { font-family: 'Open Sans Light';font-size:20px; color:#fff; text-transform:inherit;} .banner .banner-sidebar p {font-family: 'Open Sans Light'; font-size:15px; color:#fff; margin-top:20px; padding:0 0 0 40px;} .banner .banner-sidebar p img { float:left; margin-right:10px; margin-top: 4px; vertical-align:middle;} .banner .banner-sidebar hr { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(147,183,218,0.2), rgba(147,183,218,99), rgba(147,183,218,0.2)); background-image: -moz-linear-gradient(left, rgba(147,183,218,0.2), rgba(147,183,218,99), rgba(147,183,218,0.2)); background-image: -ms-linear-gradient(left, rgba(147,183,218,0.2), rgba(147,183,218,99), rgba(147,183,218,0.2)); background-image: -o-linear-gradient(left, rgba(147,183,218,0.2), rgba(147,183,218,99), rgba(147,183,218,0.2)); -webkit-box-shadow: 0px 1px 1px 0px rgba(0,76,149,0.05); -moz-box-shadow: 0px 1px 1px 0px rgba(0,76,149,0.05); box-shadow: 0px 1px 1px 0px rgba(0,76,149,0.05); }<div class="banner"> <div class="banner-container "> <span class="le-arro"><a href="javascript:;"><img src="images/left-arrow-thin.png" /></a></span> <div class="banner-slides"> <img class="banner-img" src="http://msi-vmwebmsi.metricstream.com/metricstream/sites/default/files/Home-Banner-ORM.jpg" /> <div class="banner-text"> <h1>Unifying audit and data repositories</h1> <h2>Simplifying ERM for Société Générale.</h2> <a href="" class="watch-btn btn-bcg-orange">WATCH <img src="images/watch-more-icon.png" /></a> </div> </div> <div class="banner-slides"> <img class="banner-img" src="http://msi-vmwebmsi.metricstream.com/metricstream/sites/default/files/Home-Banner44_1.jpg" /> <div class="banner-text"> <h1>Slide 2</h1> <h2>Simplifying ERM for Société Générale.</h2> <a href="" class="watch-btn btn-bcg-orange">WATCH <img src="images/watch-more-icon.png" /></a> </div> </div> <div class="banner-slides"> <img class="banner-img" src="http://msi-vmwebmsi.metricstream.com/metricstream/sites/default/files/zurich%20home%20banner_2_0.jpg" /> <div class="banner-text"> <h1>Slide 3</h1> <h2>Simplifying ERM for Société Générale.</h2> <a href="" class="watch-btn btn-bcg-orange">WATCH <img src="images/watch-more-icon.png" /></a> </div> </div> <div class="banner-slides"> <img class="banner-img" src="images/banners/banner_01.jpg" /> <div class="banner-text"> <h1>Slide 4</h1> <h2>Simplifying ERM for Société Générale.</h2> <a href="" class="watch-btn btn-bcg-orange">WATCH <img src="images/watch-more-icon.png" /></a> </div> </div> <span class="ri-arro"><a href="javascript:;"><img src="images/right-arrow-thin.png" /></a></span> <div class="pagination-box"> <ul class="no-li"> </ul> </div> </div> </div>讨论(0) -
It's work for me.
$('document').ready(function(){ // init slider $('#cbp-fwslider').cbpFWSlider(); /**Set a 3 seconds interval if next button is visible (so is not the last slide) click next button else it finds first dot and click it to start from the 1st slide**/ setInterval( function(){ if($('.cbp-fwnext').is(":visible")){ $('.cbp-fwnext').click(); }else{ //find the span element $('.cbp-fwdots').find("span").each(function(){ //check if the class of the selected span is cbp-fwcurrent if( $(this).attr("class") == "cbp-fwcurrent" ){ //check if the span is the last element then reset else continue if( $(this).is(':last-child') ){ $('.cbp-fwdots').find('span').click(); }else{ $(this).next().click(); } } }) } } ,3000 ); });讨论(0) -
you can set the click event in right (or left) button
$('document').ready(function(){ // init slider $('#cbp-fwslider').cbpFWSlider(); /** Set a 3 seconds interval if next button is visible (so is not the last slide) click next button else it finds first dot and click it to start from the 1st slide **/ setInterval( function(){ if($('.cbp-fwnext').is(":visible")) { $('.cbp-fwnext').click(); } else{ $('.cbp-fwdots').find('span').click(); } } ,3000 ); });讨论(0) -
$('document').ready(function(){ $('#cbp-fwslider').cbpFWSlider(); setInterval( function(){ if($('.cbp-fwdots').find('span:last').hasClass('cbp-fwcurrent')){ $('.cbp-fwdots').find('span:first-child').click(); }else{ $('.cbp-fwnext').click();}} ,3000 );});for return to first span (span:first-child) bucle infinite
讨论(0) -
Check this, infinite
$('document').ready(function(){ $('#cbp-fwslider').cbpFWSlider(); setInterval( function(){ if($('.cbp-fwdots').find('span:last').hasClass('cbp-fwcurrent')) { $('.cbp-fwdots').find('span').click(); } else{ $('.cbp-fwnext').click(); } } ,3000 );});讨论(0)
加载中...
- 热议问题