Question

我刚开始使用Owl Carousel。注意，owl.carousel.js中存在一个错误。当使用选项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

Answer 1

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

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

请尝试以下操作：

$('.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>

猫头鹰轮播-禁用上一张幻灯片上的下一个按钮

1 个答案: