猫头鹰轮播，到达第一个/最后一个项目后禁用导航答案

【问题标题】：Owl Carousel, navigation disabled after reaching first/last item猫头鹰轮播，到达第一个/最后一个项目后禁用导航
【发布时间】：2014-09-17 15:26:12
【问题描述】：

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

我的代码

$(document).ready(function() {
  var owl = $("#owl-demo");
  owl.owlCarousel({
    rewindNav : false,	
    pagination : false,        
    items : 4
  });
  // Custom Navigation Events
  $(".next").click(function(){
    owl.trigger('owl.next');
  })
  $(".prev").click(function(){
    owl.trigger('owl.prev');
  })
});

.item { background: #e5e5e5; margin: 10px}
.btn { background: #bd0000; color: #fff; padding: 5px 10px; cursor: pointer}

<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.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet" />

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
</div>

<div class="customNavigation">
  <a class="btn prev">Previous</a>
  <a class="btn next">Next</a>
</div>

http://jsfiddle.net/p3d52z4n/1/

【问题讨论】：

如果你不使用自定义按钮，你可以这样做：jsfiddle.net/hr5ucj77
哦，所以它已经默认提供了。谢谢：D

标签： javascript jquery css owl-carousel

【解决方案1】：

您可以使用 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();
  }
}

查看工作演示 - http://jsfiddle.net/p3d52z4n/9/

【讨论】：

工作..谢谢

【解决方案2】：

最简单的解决方案：

OwlCarousel 2 在到达第一个/最后一个元素时为导航元素提供disabled 类。

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

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

【讨论】：

【解决方案3】：

只需使用回调-

loop:false,
navRewind: false

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

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

会成功的。

【讨论】：

【解决方案4】：

我在 Owl Carousel 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 - 给类“关闭”你想要的禁用按钮的属性。

【讨论】：

谢谢！我一直在寻找的解决方案！与 owlslider2 一起使用就像魅力一样。

【解决方案5】：

使用 Owl Carousel 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();

【讨论】：

loop:true, loop:false ?
我们只能使用一个循环：true or false :)
我知道，但是为什么你的代码中会有both？

【解决方案6】：

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

注意 .on() 事件

$('.homeSlider').owlCarousel({
    loop: false ,
    autoplay: false,
    navClass: ['fa fa-chevron-left', 'fa fa-chevron-right'],
    navText: ['', ''],
    margin: 20,
    startPosition: -0,
    items: 3,
    nav: true,
    dots: false,
    center: false,
    autoWidth: true,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items:2,
            margin: 20,
            startPosition: 0,
            loop: true,
            autoWidth: true,
            center: false

        },
        992: {
            items: 3
        },
        1920: {
            items: 5
        }
    }}).on('initialized.owl.carousel changed.owl.carousel refreshed.owl.carousel', function (event) {
    //alert("s");
    if (!event.namespace) return;
    var carousel = event.relatedTarget,
        element = event.target,
        current = carousel.current();

    if(current === carousel.maximum()) $('.homeSlider .fa-chevron-right').hide();
    if(current === carousel.minimum()) $('.homeSlider .fa-chevron-left').hide();

});
$('.homeSlider .fa-chevron-left').hide();

【讨论】：

【解决方案7】：

使用自定义导航在 Owl Carousel 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();
            }
        }
    }

【讨论】：

【解决方案8】：

如前所述，您可以使用 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 选择器 [disabled] 设置禁用按钮的样式。

【讨论】：

【解决方案9】：

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

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

或者你想要的

【讨论】：