0

我刚开始使用猫头鹰旋转木马。注意到owl.carousel.js 中有一个bug。当使用选项 slideBy:'page' 时，上一个和下一个导航在禁用时以及在第一页或最后一页上仍然有效。

例如：如果我点击了下一个箭头，它把我送到了项目的最后一页，然后我再次点击了下一个箭头（即使它是灰色的），它仍然是可点击的，然后我又回到了第一页。

同样的情况发生在第一页，但使用前一个箭头。

有任何解决这个问题的方法吗？

HTML

<div class="thumbnails owl-carousel owl-theme">
    <a class="thumbnail " title="" href="">
      <img src="http://topfreeintro.bdjm5gygfhwdb5d.maxcdn-edge.com/wp-content/uploads/2018/08/No-Text-Intro-Template-108-160x160.jpg?x84593" alt="The Gwen Teething Toy - Thumbnail TEST">
    </a>

    <a class="thumbnail " title="" href="">
      <img src="https://cdn.shopify.com/s/files/1/2152/8743/products/CGEAR_CG05Y1101045NP_COMFORT_MAT_FOREST_GREEN_PRODUCT_3_72dpi_c3929ecd-5b2c-4ec3-83aa-c5a37df2badd_160x160.jpg?v=1547876502" alt="The Gwen Teething Toy - Thumbnail TEST">
    </a>

    <a class="thumbnail " title="" href="">
      <img src="http://topfreeintro.bdjm5gygfhwdb5d.maxcdn-edge.com/wp-content/uploads/2018/08/No-Text-Intro-Template-105-160x160.jpg?x84593" alt="The Gwen Teething Toy - Thumbnail TEST">
    </a>

    <a class="thumbnail " title="" href="">
      <img src="https://v-play.net/wp-content/uploads/2016/07/free_music_for_games_purple-planet.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
    </a>

    <a class="thumbnail " title="" href="">
      <img src="https://cdn.shopify.com/s/files/1/0225/1115/products/textures-free-hand-painted-wall-texture-01-1_compact.jpg?v=1497443190" alt="The Gwen Teething Toy - Thumbnail TEST">
    </a>

    <a class="thumbnail " title="" href="">
      <img src="https://images-na.ssl-images-amazon.com/images/I/61AD6ZRsqAL._AC_UL160_SR160,160_.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
    </a>

    <a class="thumbnail " title="" href="">
      <img src="https://www.jesselanewellness.com/wp-content/uploads/2016/02/Healthy-Dairy-Free-Dessert-Book-Tour-Life-of-Eden.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
    </a>

    <a class="thumbnail " title="" href="">
      <img src="https://thumbs.dreamstime.com/t/violet-purple-orchid-flowers-decorated-wood-can-be-used-as-background-free-space-your-text-violet-purple-orchid-108412326.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
    </a>

</div>

CSS

.product-gallery .thumbnails {
  margin: 2em 0 0;
}

.column {
  float: left;
  padding-left: 20px;
  padding-right: 20px;
}

.main {
  text-align: center;
}

.product-gallery .main a {
  display: inline-block;
  max-width: 100%;
}

img {
  height: auto;
  vertical-align: top;
  max-width: 100%;
}

演示 JSFIDDLE

4

1 回答 1

0

问题是您的 owl-next 按钮正在抓取禁用的类，但按钮本身仍然处于活动状态。

您希望您的应用在点击轮播项目的最后一页时禁用 owl-next 按钮。您可以使用传递回调函数的 owl 事件对象来实现这一点。猫头鹰 api 事件

尝试以下操作：

$('.owl-carousel').owlCarousel({
    loop:false,
    margin:10,
    nav:true,
    slideBy:'page',
    responsive:{
        0:{
            items:4
        },
        600:{
            items:4
        },
        1000:{
            items:4
        }
    }
});

$('.owl-carousel').on('changed.owl.carousel', function(e) {

    $('button.owl-next').removeAttr('disabled');
    $('button.owl-prev').removeAttr('disabled');

    if ( ( e.page.index + 1 ) >= e.page.count ){
        $('button.owl-next').attr('disabled', 'disabled');
    } else {
        $('button.owl-next').removeAttr('disabled');
    }
    
    if ( e.page.index == 0 ){
        $('button.owl-prev').attr('disabled', 'disabled');
    } else {
        $('button.owl-prev').removeAttr('disabled');
    }

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>



<div class="thumbnails owl-carousel owl-theme">
        
        <a class="thumbnail " title="" href="">
          <img src="http://topfreeintro.bdjm5gygfhwdb5d.maxcdn-edge.com/wp-content/uploads/2018/08/No-Text-Intro-Template-108-160x160.jpg?x84593" alt="The Gwen Teething Toy - Thumbnail TEST">
        </a>
        
        <a class="thumbnail " title="" href="">
          <img src="https://cdn.shopify.com/s/files/1/2152/8743/products/CGEAR_CG05Y1101045NP_COMFORT_MAT_FOREST_GREEN_PRODUCT_3_72dpi_c3929ecd-5b2c-4ec3-83aa-c5a37df2badd_160x160.jpg?v=1547876502" alt="The Gwen Teething Toy - Thumbnail TEST">
        </a>
        
        <a class="thumbnail " title="" href="">
          <img src="http://topfreeintro.bdjm5gygfhwdb5d.maxcdn-edge.com/wp-content/uploads/2018/08/No-Text-Intro-Template-105-160x160.jpg?x84593" alt="The Gwen Teething Toy - Thumbnail TEST">
        </a>
        
        <a class="thumbnail " title="" href="">
          <img src="https://v-play.net/wp-content/uploads/2016/07/free_music_for_games_purple-planet.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
        </a>
        
        <a class="thumbnail " title="" href="">
          <img src="https://cdn.shopify.com/s/files/1/0225/1115/products/textures-free-hand-painted-wall-texture-01-1_compact.jpg?v=1497443190" alt="The Gwen Teething Toy - Thumbnail TEST">
        </a>
        
        <a class="thumbnail " title="" href="">
          <img src="https://images-na.ssl-images-amazon.com/images/I/61AD6ZRsqAL._AC_UL160_SR160,160_.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
        </a>
        
        <a class="thumbnail " title="" href="">
          <img src="https://www.jesselanewellness.com/wp-content/uploads/2016/02/Healthy-Dairy-Free-Dessert-Book-Tour-Life-of-Eden.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
        </a>
        
        <a class="thumbnail " title="" href="">
          <img src="https://thumbs.dreamstime.com/t/violet-purple-orchid-flowers-decorated-wood-can-be-used-as-background-free-space-your-text-violet-purple-orchid-108412326.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
        </a>
        
</div>

于 2019-02-11T23:59:07.917 回答