CODEWITHSUNDEEP
javascriptjquerycssowl-carousel
owari
owari

Reputation: 143

Owl Carousel, navigation disabled after reaching first/last item

I'm trying to use owl carousel for my website. I want to disable the navigation after it reach first/last item, for example by adding "disabled" class in navigation then disable it via css. Is it possible?

my 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/

Upvotes: 14

Views: 87025

Answers (9)

SUAT SUPHI
SUAT SUPHI

Reputation: 527

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

or what you want

Upvotes: 0

wortwart
wortwart

Reputation: 3350

As said befor, you can use Owl's callbacks to hide or change the "Next" button. But instead of using some disabled class to tell the user the button should not be used anymore you can actually disable it very simply:

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

You can style the disabled button with the CSS selector [disabled].

Upvotes: 1

Vishal Kumar
Vishal Kumar

Reputation: 517

Simply use callbacks-

loop:false,
navRewind: false

You'll notice that a 'disabled' class is added to owl-next and owl-prev when the first/last item is reached. Adding CSS-

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

will do the trick.

Upvotes: 6

sbalbous
sbalbous

Reputation: 11

Working for me on Owl Carousel 2 with custom navigation

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

Also noticed that you can have several callbacks with the responsive approach like :

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

Upvotes: 1

Ahmet Uğur
Ahmet Uğur

Reputation: 472

I was searching to solution , i found some code and i combine them. Its works for me. when first item left arrow hiding when last item right arrow hiding.

Attention to .on() event

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

Upvotes: 1

Brahmanand Gorati
Brahmanand Gorati

Reputation: 21

It's Working for me using 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();

Upvotes: 2

Nottenga
Nottenga

Reputation: 177

Simplest solution:

OwlCarousel 2 gives disabled class to nav elements when the first/last element is reached.

So you could just need something like that:

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

Upvotes: 10

Artipixel
Artipixel

Reputation: 1244

I had the same issue with Owl Carousel 2, My solution - with the native navigation buttons, after calling the slider:

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

As for the css - give the class "off" the properties you want for disabled button.

Upvotes: 3

Hovhannes Sargsyan
Hovhannes Sargsyan

Reputation: 1083

You can use callbak afterAction and with your custom controls

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

Check the working demo - http://jsfiddle.net/p3d52z4n/9/

Upvotes: 16

Related Questions