web-dev-qa-db-fra.com

Owl Carousel, navigation désactivée après avoir atteint le premier/dernier élément

J'essaie d'utiliser un carrousel de hibou pour mon site Web. Je veux désactiver la navigation après avoir atteint le premier/dernier élément, par exemple en ajoutant une classe "désactivée" dans la navigation, puis le désactiver via css. C'est possible? 

mon code

$(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/

javascriptjquerycssowl-carousel
11
owari

Vous pouvez utiliser callbak afterAction et avec vos contrôles personnalisés

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

Vérifiez la démo de travail - http://jsfiddle.net/p3d52z4n/9/

15
Hovhannes Sargsyan

La solution la plus simple:

OwlCarousel 2 / donne disabled class aux éléments nav lorsque le premier/dernier élément est atteint.

Donc, vous pourriez avoir besoin de quelque chose comme ça:

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

J'ai eu le même problème avec Owl Carousel 2, Ma solution - avec les boutons de navigation natifs, après avoir appelé le curseur:

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

Quant au css - donnez à la classe "off" les propriétés que vous voulez pour le bouton désactivé.

3
Artipixel

Cela fonctionne pour moi avec 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();
1
Brahmanand Gorati

Utilisez simplement des rappels-

loop:false,
navRewind: false

Vous remarquerez qu'une classe 'disabled' est ajoutée à owl-next et owl-prev lorsque le premier/dernier élément est atteint. Ajout de CSS-

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

fera l'affaire.

1
Vishal Kumar

Travailler pour moi sur Owl Carousel 2 avec une navigation personnalisée

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

Vous avez également remarqué que vous pouvez avoir plusieurs rappels avec l’approche réactive tels que:

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

Comme dit précédemment, vous pouvez utiliser les rappels de Owl pour masquer ou modifier le bouton "Suivant". Mais au lieu d'utiliser une classe disabled pour indiquer à l'utilisateur que le bouton ne doit plus être utilisé, vous pouvez le désactiver très simplement:

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

Vous pouvez styliser le bouton désactivé avec le sélecteur CSS [disabled].

0
wortwart

Je cherchais une solution, j'ai trouvé du code et je les combine. Cela fonctionne pour moi. quand le premier élément gauche se cache lorsque le dernier élément se cache bien.

Attention à l'événement .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();
0
Ahmet Uğur