jQuery Owl Carousel 2隐藏导航

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

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

喜欢：当有一个项目时：类“第一项”，当有两个框时：class =“item two”当有超过2时，那么它将只有class =“item”。

JS：

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

HTML：

 
 
  Personal guide / Amsterdam 
Here some text bla bla bla.
 
  

Answer 1

试试这个。

 jQuery("#sliderwhat").owlCarousel({ navigation : false, // Show next and prev buttons slideSpeed : 300, paginationSpeed : 400, singleItem:true }); } 

Answer 2

你可以这样做：

 
 
   Personal guide / Amsterdam 
Here some text bla bla bla.
 
  

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