jQuery Owl Carousel 2 隐藏导航答案

【问题标题】：jQuery Owl Carousel 2 hide navigationjQuery Owl Carousel 2 隐藏导航
【发布时间】：2015-02-05 11:20:10
【问题描述】：

我正在使用“Owl Carousel 2”构建一个不错的内容滑块，当只有一个或多个项目可见时，是否可以隐藏导航按钮？

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

like：当有一个项目时：class"item one"，当有两个盒子时：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>

【问题讨论】：

标签： jquery class nav owl-carousel

【解决方案1】：

试试这个。

jQuery("#sliderwhat").owlCarousel({

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

    });
  }

【讨论】：

对我来说，nav : false 可以正常工作，而 navigation : false 不起作用。
对我来说 nav : false 和 navigation : false 都不起作用
nav，owl-carousel 2 的导航属性对我不起作用，我通过 jquery 删除了导航：$('.owl-nav').remove(); $('.owl-dots').remove();

【解决方案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 的导航没有禁用选项，因此这是隐藏它的一种方法。

【讨论】：

【解决方案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% ☺

【讨论】：

【解决方案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();
    }
});

【讨论】：

【解决方案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
});

【讨论】：

【解决方案6】：

如果

nav: false

不适合你，试试这个：

navText: ['', '']

整个sn-p

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

【讨论】：