jQuery Owl Carousel 2 hide navigation

问题

I am building a nice content slider with the 'Owl Carousel 2' only is it possible to hide the nav buttons when there is only one or times items visible?

And when there is only one item or two items visible that they get a second CSS class attached on the div.item?

like: when there is one item: class"item one" and when there are two boxes: class="item two" when there are more then 2 then it's will be only class="item".

JS:

jQuery("#sliderwhat").owlCarousel({
    loop : true,
    nav : true
});

HTML:

<div id="sliderwhat" class="box">

    <div class="item">
        <img src="image.jpg" alt="" />
        <span>Personal guide / <span>Amsterdam</span></span>
        <div>Here some text bla bla bla.</div>
    </div>

</div>

回答1:

Try this.

jQuery("#sliderwhat").owlCarousel({

        navigation : false, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true

    });
  }

回答2:

You could do something like:

<div id="sliderwhat" class="box">

    <div class="itemsWrap"> <!-- class item, one, two added to this -->
        <img src="image.jpg" alt="" />
        <span>Personal guide / <span>Amsterdam</span></span>
        <div>Here some text bla bla bla.</div>
    </div>

</div>

var $owl = $('#sliderwhat');

if($owl.length){
    $owl.on('initialized.owl.carousel', function(event) {
        var $itemsWrap = $owl.find("div.itemsWrap"); // or use Owl's .owl-stage class
        var items = event.item.count;
        var $owlControls = $('div.owl-controls');

        items <= 3 ? $owlControls.hide() : $owlControls.show();

        switch(items){
            case 1:
                $itemsWrap.addClass('item one');
                break;
            case 2:
                $itemsWrap.addClass('item two');
                break;
            default:
                $itemsWrap.addClass('item');
                break;
        }

    })

    $owl.owlCarousel({ //options in here });

}

I'm sure the ternary operator and switch statement could be combined. There, currently, isn't a disable option for the navigation for Owl Carousel 2, so this is one way to hide it.

回答3:

Having a similar issue, I found this temporary fix for adding a disabled class: https://github.com/smashingboxes/OwlCarousel2/issues/132

  $(".owl-carousel").on('initialized.owl.carousel changed.owl.carousel refreshed.owl.carousel', function (event) {
    if (!event.namespace) return;
    var carousel = event.relatedTarget,
        element = event.target,
        current = carousel.current();
    $('.owl-next', element).toggleClass('disabled', current === carousel.maximum());
    $('.owl-prev', element).toggleClass('disabled', current === carousel.minimum());
  });

It works great except the "prev" nav isn't disabled on load.

If not work Then you have to do below this..

In CSS:

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

in JQ:

$(".owl-prev").removeAttr("style");

Will work perfect..100% ☺

回答4:

This is way what i have found out.

$('.owl-demo-featured').on('change.owl.carousel', function (e) {
    var visibleSlides = e.page.size;
    var prevBtn = $('.prev2');
    var nextBtn = $('.next2');
    prevBtn.show();
    nextBtn.show();
    if (e.namespace && e.property.name === 'position' && e.relatedTarget.relative(e.property.value) === 0) {
        prevBtn.hide();
    }
    if (e.namespace && e.property.name === 'position' && e.relatedTarget.relative(e.property.value) === e.relatedTarget.items().length - visibleSlides) {
        nextBtn.hide();
    }
});

回答5:

In the lateste version of OWL carousel you need to hide the nav controls like this : and it will work 100%

$(".property-list-slider").owlCarousel({
    items : 3,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,

        },
        600:{
            items:2,

        },
        1000:{
            items:3,

        }
    },
    lazyLoad : true,
    autoPlay : true,
    slideSpeed : 500,
    nav:false,
    navigationText : ["",""],
    rewindNav : true,
    scrollPerPage : false,
    pagination :false,
    paginationSpeed : 500,
    loop: false,
    margin:20,
    paginationNumbers: false,
    stopOnHover:true
});

回答6:

nav: false

does not work for you, try this:

navText: ['', '']

whole snippet

$('.owl-carousel').owlCarousel({
    items: 1,
    nav: false,
    width: 'auto',
    navText: ['', '']
});

来源：https://stackoverflow.com/questions/28342603/jquery-owl-carousel-2-hide-navigation

标签

jquery

class

nav

owl-carousel