Javascript 猫头鹰转盘，到达第一个/最后一个项目后禁用导航

我正在尝试使用猫头鹰转盘为我的网站。我想在导航到达第一个/最后一个项目后禁用它，例如在导航中添加“disabled”类，然后通过css禁用它。可能吗

我的代码

$（文档）.ready（函数（）{
var owl=$（“#owl demo”）；
猫头鹰旋转木马({
倒带导航：错误，
分页：false，
项目：4
});
//自定义导航事件
$（“.next”）。单击（函数（）{
owl.trigger（'owl.next'）；
})
$（“.prev”）。单击（函数（）{
owl.trigger（'owl.prev'）；
})
});
.item{背景：#e5；边距：10px}
.btn{背景：#bd0000；颜色：#fff；填充：5px 10px；光标：指针}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
以前的
下一个
您可以使用callbak afterAction和自定义控件

afterAction: function(){
  if ( this.itemsAmount > this.visibleItems.length ) {
    $('.next').show();
    $('.prev').show();

    $('.next').removeClass('disabled');
    $('.prev').removeClass('disabled');
    if ( this.currentItem == 0 ) {
      $('.prev').addClass('disabled');
    }
    if ( this.currentItem == this.maximumItem ) {
      $('.next').addClass('disabled');
    }

  } else {
    $('.next').hide();
    $('.prev').hide();
  }
}

检查工作演示-
我对Owl转盘2也有同样的问题，
我的解决方案-在调用滑块后，使用本机导航按钮：

             var elm = '.slider'; //your slider class
             function toggleArrows(){ 
                if($(elm).find(".owl-item").last().hasClass('active') && 
                   $(elm).find(".owl-item.active").index() == $(elm).find(".owl-item").first().index()){                       
                    $(elm).find('.owl-nav .owl-next').addClass("off");
                    $(elm).find('.owl-nav .owl-prev').addClass("off"); 
                }
                //disable next
                else if($(elm).find(".owl-item").last().hasClass('active')){
                    $(elm).find('.owl-nav .owl-next').addClass("off");
                    $(elm).find('.owl-nav .owl-prev').removeClass("off"); 
                }
                //disable previus
                else if($(elm).find(".owl-item.active").index() == $(elm).find(".owl-item").first().index()) {
                    $(elm).find('.owl-nav .owl-next').removeClass("off"); 
                    $(elm).find('.owl-nav .owl-prev').addClass("off");
                }
                else{
                    $(elm).find('.owl-nav .owl-next,.owl-nav .owl-prev').removeClass("off");  
                }
            }

            //turn off buttons if last or first - after change
            $(elm).on('initialized.owl.carousel', function (event) {
                toggleArrows();
            });
             $(elm).on('translated.owl.carousel', function (event) { toggleArrows(); });

至于css-为类“关闭”您想要的禁用按钮属性。
最简单的解决方案：

当到达第一个/最后一个元素时，OwlCarousel2为导航元素提供
disabled
类

所以你可能需要这样的东西：

.owl-nav{
  .disabled{
    display: none;
  }
}

使用猫头鹰转盘2对我有效

$('#owlCarousel').owlCarousel({
            loop:true,
            loop:false,
            responsiveClass:true,            
            responsive:{
                0:{
                    items:1,
                    nav:true
                },
                600:{
                    items:3,
                    nav:true
                },
                1000:{
                    items:4,
                    nav:true,                    
                    touchDrag:false,
                    //pullDrag:false,
                    freeDrag:false
                }                
            },
            onTranslated:callBack
        });
        function callBack(){
          if($('.owl-carousel .owl-item').last().hasClass('active')){
                $('.owl-next').hide();
                $('.owl-prev').show(); 
                console.log('true');
             }else if($('.owl-carousel .owl-item').first().hasClass('active')){
                $('.owl-prev').hide(); 
                $('.owl-next').show();
                console.log('false');
             }
        }
        $('#owlCarousel .owl-prev').hide();

我在寻找解决方案，我找到了一些代码，并将它们结合起来。它对我有用。当第一项左箭头隐藏时，当最后一项右箭头隐藏时

注意.on（）事件

在Owl转盘2上为我工作，带有自定义导航

            onTranslated: function(event){
                if (event.item.index == 0) jQuery("#owlPrev").hide();
                else jQuery("#owlPrev").show();

                if (event.item.index == (event.item.count - 1)) jQuery("#owlNext").hide();
                else jQuery("#owlNext").show();
            }

还注意到，您可以使用响应式方法进行多次回调，如：

    responsive:{
        0:{
            items: 1,
            slideBy: 1,
            onTranslated: function(event){
                if (event.item.index == 0) jQuery("#owlPrev").hide();
                else jQuery("#owlPrev").show();

                if (event.item.index == (event.item.count - 1)) jQuery("#owlNext").hide();
                else jQuery("#owlNext").show();
            }
        },
        992:{
            items: 2,
            slideBy: 2,
            onTranslated: function(event){
                if (event.item.index === 0) jQuery("#owlPrev").hide();
                else jQuery("#owlPrev").show();

                if (event.item.index == (event.item.count / 2)) jQuery("#owlNext").hide();
                else jQuery("#owlNext").show();
            }
        }
    }

简单地使用回调-

loop:false,
navRewind: false

您会注意到，当到达第一个/最后一个项目时，一个“disabled”类被添加到owl next和owl prev中。添加CSS-

.owl-next.disabled, .owl-prev.disabled {
display: none !important;
}

将完成此操作。
如前所述，您可以使用Owl的回调来隐藏或更改“下一步”按钮。但是，与其使用一些
disabled
类告诉用户按钮不应再使用，您实际上可以非常简单地禁用它：

$slider.on('changed.owl.carousel', ev => {
    const carousel = ev.currentTarget
    $('.owl-next', $el).attr('disabled', carousel.current() === carousel.maximum())
    $('.owl-prev', $el).attr('disabled', carousel.current() === carousel.minimum())
})

您可以使用CSS选择器设置禁用按钮的样式
[禁用]

 $('.owl-carousel').each(function (e) {
        var owl = $(this);
        if (!owl.data('owl.carousel').options.loop) {
            var options = owl.data('owl.carousel').options;
            owl.trigger('destroy.owl.carousel');
            owl.owlCarousel(options).on('changed.owl.carousel', ev => {
                if (!event.namespace) return;
                var carousel = event.relatedTarget,
                    element = event.target,
                    current = carousel.current();
                setTimeout(function () {
                    $('.owl-next').toggleClass('disabled', current === carousel.maximum());
                    $('.owl-prev').toggleClass('disabled', current === carousel.minimum());
                }, 1);
            });
        }
    });

css

或者你想要什么
如果你不使用自定义按钮，你可以这样做：哦，那么它已经默认提供了。谢谢：谢谢！我一直在寻找的解决方案！就像猫头鹰滑板上的符咒一样有效。。谢谢
loop:true，loop:false
？我们只能使用一个循环：true或false:）我知道，但为什么您的代码中都有它们？
 $('.owl-carousel').each(function (e) {
        var owl = $(this);
        if (!owl.data('owl.carousel').options.loop) {
            var options = owl.data('owl.carousel').options;
            owl.trigger('destroy.owl.carousel');
            owl.owlCarousel(options).on('changed.owl.carousel', ev => {
                if (!event.namespace) return;
                var carousel = event.relatedTarget,
                    element = event.target,
                    current = carousel.current();
                setTimeout(function () {
                    $('.owl-next').toggleClass('disabled', current === carousel.maximum());
                    $('.owl-prev').toggleClass('disabled', current === carousel.minimum());
                }, 1);
            });
        }
    });

.owl-next.disabled, .owl-prev.disabled {
    display: none !important;
}