猫头鹰旋转木马 - 在最后一张幻灯片禁用下一个按钮

Question

我刚开始使用猫头鹰旋转木马。注意到，有在owl.carousel.js的错误。当使用选项slideBy：“页”既prev和next导航仍然起作用时禁用和第一或最后一页上。

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

同样的情况，第一页上，但与之前的箭头。

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

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%;
}

但是，联四zxsw POI

Answer 1

问题是，你的猫头鹰，下一个按钮被抓禁用类，但其本身的按钮仍然有效。

您希望您的应用程序来打你的旋转木马项目的最后一页时，禁止猫头鹰下一个按钮。你可以做到这一点使用猫头鹰事件对象传递一个回调函数。 JSFIDDLE

尝试以下方法：

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');
    }

});