Search code examples
javascriptjqueryperformanceslideshowcycle

Need help changing the speed duration of slides with Jquery scripts


So first off I have basically no working knowledge of javascript or Jquery. Second off I have tried to look up answers to this and tried a few things but nothing worked for me.

My slides seem to change every 6 or 7 seconds. I want to make each slide last longer. Maybe about 12 seconds before changing. I have tried changing the speed and timeout values and adding mouse overs for a pause feature but nothing has worked.

This is the code built into the web template. Top half looks to be for admin editing, while bottom is the general page view. Any help with this is greatly appreciated.

jQuery.noConflict();     
jQuery(document).ready(function($){

// Checks for Admin to apply fixes for backend
if ( $('#adminbar #toolbar').length ) {

    $('#features').cycle({
        fx: 'scrollRight',
        speed: 100,
        next: '#next',
        prev: '#prev',
        timeout: 0
    });
    $("#controls").show();
    $("ul#featuredNav").css({
        'margin-top': '-38px'
    });
    $("ul#featuredNav li").css({
        'margin': '-20px 0 90px',
        'padding': '0 0 0 20px'
    });
    $("#featuredWrapper").css({
        'margin': '0 0 80px'
    });
}
else {

    $('#features').cycle({
        fx: 'scrollRight',
        pager:  '#featuredNav',
        speed: 500,
        timeout: 6000,        
        pagerAnchorBuilder: function(idx, slide) {
            // return selector string for existing anchor
            return '#featuredNav li:eq(' + idx + ')';
        },
        updateActivePagerLink: function(pager, currSlideIndex) {
            $(pager).find('li').removeClass('activeTab')
                .filter('li:eq('+currSlideIndex+')').addClass('activeTab');
        }
    });
    $("#controls").hide();
}
});

Solution

  • Change

    timeout: 6000,  
    

    to

    timeout: 12000,  
    

    then clear your browser and site caches.