jQuery技术:jQuery Owl Carousel 2隐藏导航

试试这个。

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

你可以这样做：

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

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

这是我发现的方式。

需要了解更多jQuery教程分享jQuery Owl Carousel 2隐藏导航，都可以关注jQuery技术分享栏目---计算机技术网(www.ctvol.com)!

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