Я использую Owl Carousel для плавной прокрутки, и она работает нормально, но когда я наведите курсор мыши на ползунок, он останавливается (что правильно), но для его остановки требуется время, но мгновенно не останавливается.
Есть ли что-нибудь, что мы можем сделать с ним, чтобы мгновенно остановиться при наведении мыши.
Вот что я сделал до сих пор.
- HTML
<div id="review-wrapper" class="owl-carousel owl-theme">
<div class="item">
<div class="review-block">
<p><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star-half-o" aria-hidden="true"></i></p>
<div class="review-text"><p>“Very professional from start to finish delivered what they promised. Charlie
the gentleman who picked up my bike 100%”</p></div>
</div>
<div class="review-block">
<p><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star-half-o" aria-hidden="true"></i></p>
<div class="review-text"><p>“Very professional from start to finish delivered what they promised. Charlie
the gentleman who picked up my bike 100%”</p></div>
</div>
</div>
<div class="item">
<div class="review-block">
<p><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star-half-o" aria-hidden="true"></i></p>
<div class="review-text"><p>“Very professional from start to finish delivered what they promised. Charlie
the gentleman who picked up my bike 100%”</p></div>
</div>
<div class="review-block">
<p><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star-half-o" aria-hidden="true"></i></p>
<div class="review-text"><p>“Very professional from start to finish delivered what they promised. Charlie
the gentleman who picked up my bike 100%”</p></div>
</div>
</div>
<div class="item">
<div class="review-block">
<p><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star-half-o" aria-hidden="true"></i></p>
<div class="review-text"><p>“Very professional from start to finish delivered what they promised. Charlie
the gentleman who picked up my bike 100%”</p></div>
</div>
<div class="review-block">
<p><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i
class="fa fa-star-half-o" aria-hidden="true"></i></p>
<div class="review-text"><p>“Very professional from start to finish delivered what they promised. Charlie
the gentleman who picked up my bike 100%”</p></div>
</div>
</div>
- JQuery
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
//slideTransition: 'linear',
autoplayTimeout: 0,
autoplaySpeed: 8000,
center: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1,
autoplay: false,
},
600: {
items: 2,
autoplay: true,
},
1000: {
items: 7,
autoplay: true,
}
}
});
$('#review-wrapper .item').on('mouseenter', function (e) {
//alert(111);
//owl.trigger('stop.owl.autoplay');
owl.owlCarousel({autoplaySpeed: 100,});
})
$('#review-wrapper .item').on('mouseleave', function (e) {
owl.trigger('play.owl.autoplay')
})
Заранее спасибо.