使猫头鹰旋转木马的点导航速度更快

Question

我想在用户使用点导航时使导航滑块更快。当您使用点来更改幻灯片时，幻灯片移动得太慢。

我在Owl Carousel文档中读到dotsSpeed参数是一个布尔值，但它没有说明我是否可以为时间设置一个值。

有一个dotsSpeed唯一的地方，我把时间定在价值1000，没有任何事情发生。

如何加快点导航动作？

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    nav: false,
    navRewind: true,
    navText: ['prev', 'next'],
    navSpeed: false,
    navElement: 'div',
    navContainer: false,
    navContainerClass: 'owl-nav',
    navClass: ['owl-prev', 'owl-next'],
    slideBy: 1,
    dotClass: 'owl-dot',
    dotsClass: 'owl-dots',
    dots: true,
    dotsEach: false,
    dotData: false,
    dotsSpeed: true,
    dotsContainer: false,
    controlsClass: 'owl-controls'
  });
});

#owl-demo .item {
  margin: 3px;
}

#owl-demo .item img {
  display: block;
  width: 100%;
  height: auto;
}

.owl-theme .owl-controls .owl-page {
  display: inline-block;
}

.owl-theme .owl-controls .owl-page span {
  background: none repeat scroll 0 0 #869791;
  border-radius: 20px;
  display: block;
  height: 12px;
  margin: 5px 7px;
  opacity: 0.5;
  width: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css" rel="stylesheet" />

<div id="owl-demo">
  <div class="item">
    <img src="http://placehold.it/150x150" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/150x150" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/150x150" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/150x150" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/150x150" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/150x150" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/150x150" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/150x150" alt="Owl Image" />
  </div>
</div>

Answer 1

我使用版本2.2.1的dotsSpeed取得了成功。 Version 1.3.2似乎没有dotsSpeed功能。

$(function() {
  $("#owl-demo").owlCarousel({
    items: 5,
    dots: true,
    dotsSpeed: 50
  });
});

#owl-demo .item {
  margin: 3px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet">

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
  <div class="item"><img src="//placehold.it/150x150" alt="Owl Image"></div>
</div>