如何在 iosSlider 中控制动画速度？答案

【问题标题】：How to control animation speed in iosSlider?如何在 iosSlider 中控制动画速度？
【发布时间】：2013-06-20 09:00:31
【问题描述】：

我在我的网站中使用iosSlider。我需要改变滑块的动画速度。

我已阅读iosSlider 中的文档。我发现我必须使用autoSlideTransTimer 来控制滑块速度。但我做不到。

这是我的JavaScript 代码：

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
});
}

【问题讨论】：

标签： javascript jquery slider jquery-ui-slider

【解决方案1】：

我也在使用 iosSlider，这对我有用：

$('.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
    });

明显慢于：

$('.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
    });

所以autoSlideTransTimer 为我工作！

【讨论】：

我只是检查autoSlideTransTimer更改幻灯片过渡时间。我想改变滑块图像的速度。
不确定我是否关注你.. 我的幻灯片是 div 中带有文本的图像 - 而autoSlideTransTimer 设置幻灯片移动的速度。您的滑块在线我们可以看到吗？
那你能加autoSlideTransTimer: 2000,吗？

【解决方案2】：

这是一个古老的问题，但从未得到回答。您正在寻找 autoSlideTimer': 5000 //这里的数字表示幻灯片暂停的时间。可以在 jquery.iossslider.js 文件中设置。

【讨论】：