Eulenkarussell, Navigation deaktiviert, nachdem das erste/letzte Element erreicht wurde

Question

Ich versuche Eulenkarussell für meine Website zu verwenden. Ich möchte die Navigation deaktivieren, nachdem sie das erste/letzte Element erreicht haben, zum Beispiel durch Hinzufügen der Klasse "disabled" in der Navigation, dann über css deaktivieren. Ist es möglich?

meinen Code

$(document).ready(function() { 
 
    var owl = $("#owl-demo"); 
 
    owl.owlCarousel({ 
 
    rewindNav : false, \t 
 
    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/

Answer 1

Sie callbak Gefechts verwenden können und mit Ihren eigenen steuert

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

die Arbeits Demo prüfen - http://jsfiddle.net/p3d52z4n/9/

Answer 2

hatte ich das gleiche Problem mit Owl Karussell 2, Meine Lösung - mit den nativen Navigationstasten, nachdem Sie den Schieberegler Aufruf:

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

Wie für die CSS - geben Sie die Klasse „off“ die Eigenschaften Sie möchten für die deaktivierte Schaltfläche.

Answer 3

Simplest Lösung:

OwlCarousel gibt disabled Klasse Elemente nav, wenn das erste/letzte Element erreicht ist.

So konnte man nur so etwas brauchen:

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

Answer 4

Es funktioniert für mich mit Owl Karussell 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(); 

Answer 5

Ich wurde zu Lösung gesucht, fand ich einige Code und ich kombinieren Sie. Es funktioniert für mich. wenn der erste Gegenstand übrig ist, wird der Pfeil ausgeblendet, wenn der letzte Gegenstand angezeigt wird.

Attention to .on() Ereignis

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

Answer 6

für mich Arbeiten an Owl Karussell 2 mit benutzerdefinierten Navigations

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

auch bemerkt, dass Sie mehrere Rückrufe mit dem reaktiven Ansatz wie haben:

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

Answer 7

Verwenden Sie einfach Callbacks-

Sie werden bemerken, dass eine Klasse "deaktiviert" zu Eule-nächste und Eule-zurück hinzugefügt wird, wenn das erste/letzte Element erreicht ist. Hinzufügen von CSS-

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

wird den Trick tun.