如何通过滚动减慢移动引导轮播幻灯片的滚动速度答案

【问题标题】：how to slow down scrolling speed of moving bootstrap carousel slides with scrolling如何通过滚动减慢移动引导轮播幻灯片的滚动速度
【发布时间】：2015-06-03 14:28:47
【问题描述】：

我正在制作一个全屏引导轮播网站。我使用滚动来更改幻灯片，但速度很快。如何降低滚动速度？我使用此代码：

$('#mycarousel').bind('mousewheel', function(e)
    {
        if(event.wheelDelta<0) {
            $(this).carousel('next');
        }else if(event.wheelDelta>0){
            $(this).carousel('prev');
        }
    }
);

感谢您的回答:)

【问题讨论】：

显示的代码与问题无关，即 carousel('next/prev') 过渡到新状态的速度/速度。
查看stackoverflow.com/questions/17332431/…
代码将鼠标滚轮事件与更改轮播幻灯片（而不是按钮）绑定。但它工作得太快了（在笔记本电脑上，它在触摸板上一次“滑动”就通过了 5 个元素）。我想知道是否有办法让它变慢。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

非常有技巧，但应该仅以 5 次滚动的间隔触发滚动来工作

    $('#mycarousel').bind('mousewheel', function(e)
        {
            if(typeof(this.deltasum) == 'undefined'){this.deltasum = 0;}
// On chrome each scroll delta is +-120. Testing if this is cross browser
            this.deltaSum +=event.wheelDelta; // Value will be attached to DOM object


            if(event.wheelDelta<0 && this.deltaSum % 240 === 0) { // only fire if sum is divisible by 120
                $(this).carousel('next');
            }else if(event.wheelDelta>0 && this.deltaSum % 240 === 0){
                $(this).carousel('prev');
            }
        }
    );

【讨论】：

由于某种原因它不起作用。我用循环尝试了同样的事情，它也没有工作。

【解决方案2】：

在这个网站上问了一个类似的问题，src：How can I control the speed that bootstrap carousel slides in items?

速度无法通过 api 控制。尽管您可以修改负责该功能的 css。在 carousel.less 文件中找到

.item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
}

然后把 6s 改成你想要的任何东西。

如果你不使用 .less，请在 bootstrap.css 文件中查找：

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

并将 0.6s 更改为您想要的时间。您可能还想在下面的函数调用中编辑时间：

.emulateTransitionEnd(2000) 
at bootstrap.js in function Carousel.prototype.slide. That synchronize transition and prevent slide to disapear before transition ends.

【讨论】：