jQuery Owl 轮播 2 隐藏导航

Question

我正在使用 'Owl Carousel 2' 构建一个不错的内容滑块，只有在只有一个或多个项目可见时才能隐藏导航按钮吗？

当只有一个或两个项目可见时，他们会在 div.item?

上附加第二个 CSS class

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>

Answer 1

你可以做如下事情：

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

}

我确信三元运算符和 switch 语句可以结合使用。目前，Owl Carousel 2 的导航没有禁用选项，因此这是隐藏它的一种方法。

Answer 2

遇到类似的问题，我发现了这个用于添加禁用 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());
  });

除了加载时未禁用 "prev" 导航外，它工作得很好。

如果不行那么你必须做下面这个..

在CSS中：

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

在JQ:

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

会很完美..100% ☺

Answer 3

试试这个。

jQuery("#sliderwhat").owlCarousel({

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

    });
  }

Answer 4

这就是我发现的方式。

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

Answer 5

在最新版本的 OWL 旋转木马中，您需要像这样隐藏导航控件：它会 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
});

Answer 6

如果

nav: false

不适合你，试试这个：

navText: ['', '']

整个片段

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

jQuery Owl 轮播 2 隐藏导航

jQuery Owl Carousel 2 hide navigation

jquery

class

nav

owl-carousel