Search code examples
javascriptjquerysliderjquery-ui-slider

How to control animation speed in iosSlider?


I am using iosSlider in my website. I need to change the animation speed of slider.

I have read documentation in iosSlider. I found I've to use autoSlideTransTimer for controlling slider speed. But I couldn't achieve that.

Here is my JavaScript code:

function InitImageSlider() {
$('.iosSlider').iosSlider
    desktopClickDrag: true,
    snapToChildren: true,
    infiniteSlider: true,
    navSlideSelector: '.slider .navigation li',
    onSlideComplete: function(args) {
        if(!args.slideChanged) return false;

        $(args.sliderObject).find('.slider-info').attr('style', '');

        $(args.currentSlideObject).find('.slider-info').animate({
            left: '15px',
            opacity: '.9'
        }, 'easeOutQuint');
    },
    onSliderLoaded: function(args) {
        $(args.sliderObject).find('.slider-info').attr('style', '');

        $(args.currentSlideObject).find('.slider-info').animate({
            left: '15px',
            opacity: '.9'
        }, 'easeOutQuint');
    },
    onSlideChange: function(args) {
        $('.slider .navigation li').removeClass('active');
        $('.slider .navigation li:eq(' + (args.currentSlideNumber - 1) + ')').addClass('active');
    },
    autoSlide: true,
    scrollbar: true,
    scrollbarContainer: '.sliderContainer .scrollbarContainer',
    scrollbarMargin: '0',
    scrollbarBorderRadius: '0',
    keyboardControls: true
});
}

Solution

  • I am using iosSlider as well and this works for me:

    $('.iosSlider').iosSlider({
            snapToChildren: true,
            scrollbar: false,
            scrollbarHide: true,
            desktopClickDrag: true,
            infiniteSlider: true,
            autoSlideTransTimer: 2000,
            navPrevSelector: '#sl-left',
            navNextSelector: '#sl-right',
            onSlideChange: slideChange,
            onSliderLoaded: slideChange,
            responsiveSlideContainer: false,
            responsiveSlides: false,
            autoSlide: true
        });
    

    is significantly slower than:

    $('.iosSlider').iosSlider({
            snapToChildren: true,
            scrollbar: false,
            scrollbarHide: true,
            desktopClickDrag: true,
            infiniteSlider: true,
            autoSlideTransTimer: 100,
            navPrevSelector: '#sl-left',
            navNextSelector: '#sl-right',
            onSlideChange: slideChange,
            onSliderLoaded: slideChange,
            responsiveSlideContainer: false,
            responsiveSlides: false,
            autoSlide: true
        });
    

    So autoSlideTransTimer works for me!