javascript - Owl Carousel 需要导航悬停时的滚动效果

Question

这是我的 Owl Carousel 的代码。

  $(document).ready(function () {
    $("#owl-demo").owlCarousel({
     navigation: true,
     pagination: false,
     lazyLoad: true
    });
 });

当我将鼠标悬停在“上一个”或“下一个”按钮上时，我需要缓慢滚动轮播。

有人知道怎么做吗？

FIDDLE

Answer 1

添加这个JS

  navigationText: [
      "<i class='icon-chevron-left icon-white'><</i>",
      "<i class='icon-chevron-right icon-white'>></i>"
      ],

完整的 JS 应该是这样的

$(document).ready(function () {
    $("#owl-demo").owlCarousel({
        navigation: true,
        pagination: false,
        lazyLoad: true,
          
    });
  
   $(".owl-inner").hover(function() {
     $(".owl-prev").show();
     $(".owl-next").show();
 }, function() {
     $(".owl-prev").hide();
     $(".owl-next").hide();
 });
 $(".owl-prev").hide();
 $(".owl-next").hide();
});

#owl-demo .owl-item > div img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:4px;
     margin:0px 50px;
}
#owl-demo .owl-item > div {
    padding: 0px 2px
}


.owl-theme .owl-controls .owl-buttons div {
  position: absolute;
}
 
.owl-theme .owl-controls .owl-buttons .owl-prev{
  left: 0px;
  top: 55px; 
}
 
.owl-theme .owl-controls .owl-buttons .owl-next{
  right: -45px;
  top: 55px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet"/>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet"/>
<div id="owl-demo" class="owl-carousel">
    <div class="owl-inner">
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
</div>

Reference