Question

我正在构建一个带有'Owl Carousel 2'的漂亮内容滑块，只有当只有一个或多个项目可见时才可以隐藏导航按钮吗？

当只有一个项目或两个项目可见时，他们会在div.item上附加第二个CSS类？

喜欢：当有一个项目时：类“第一项”，当有两个框时：class =“item two”当有多于2时，那么它将只有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

试试这个。

jQuery("#sliderwhat").owlCarousel({

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

    });
  }

Answer 2

你可以做类似的事情：

<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 3

有一个类似的问题，我发现这个临时修复添加一个禁用的类： 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 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％工作

cmd

Answer 6

如果

nav: false

不适用于您，请尝试以下操作：

navText: ['', '']

整个摘要

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

jQuery Owl Carousel 2隐藏导航

6 个答案: