如何加快Owl Carousel点导航的幻灯片切换速度？

我明白你遇到的问题——点击切换点的时候幻灯片过渡太慢，而且尝试设置dotsSpeed为数值没效果对吧？其实你踩了个小坑：dotsSpeed参数根本不是用来控制幻灯片切换速度的。

先搞清楚参数的真实作用 #

Owl Carousel里的dotsSpeed是布尔类型，它的作用是控制导航点本身的显示/隐藏动画（比如当你启用autoplayHoverPause时，鼠标悬停后点的淡入淡出速度），和幻灯片切换半毛钱关系都没有。这就是为什么你设数值没反应的原因。

正确的解决方法 #

下面分两种场景给你方案：

场景1：统一所有导航的切换速度（包括点、prev/next按钮）

直接设置slideSpeed参数就行，它控制所有触发方式下的幻灯片切换速度，单位是毫秒（数值越小越快）：

$('.your-carousel').owlCarousel({
    // 你的其他配置项
    dots: true,
    slideSpeed: 200 // 把这个数值改小，比如200就是0.2秒完成切换
});

场景2：只加快点导航的切换速度，不影响其他导航

如果你想让点导航的切换速度比prev/next按钮更快，可以通过监听点的点击事件，手动调用carousel的切换方法并指定速度：

// 先初始化carousel
var $carousel = $('.your-carousel').owlCarousel({
    // 你的其他配置项
    dots: true,
    slideSpeed: 500 // 给其他导航保留默认速度
});

// 监听点的点击事件
$carousel.on('click', '.owl-dot', function(e) {
    e.preventDefault();
    var targetIndex = $(this).index();
    // 调用to方法，第二个参数就是切换速度（这里设150ms）
    $carousel.trigger('to.owl.carousel', [targetIndex, 150]);
});

这样点击切换点时，幻灯片会用150ms快速切换，而点击prev/next按钮还是用500ms的速度，完美区分开。

额外提示 #

如果你用的是Owl Carousel 1.x版本，逻辑类似，只是参数名和方法略有不同：

• 统一速度用slideSpeed
• 单独控制点速度的话，监听.owl-page的点击事件，调用goTo方法指定速度

内容的提问来源于stack exchange，提问作者Capitan Duke