jQuery Owl Carousel 2 隐藏导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28342603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Owl Carousel 2 hide navigation
提问by Maanstraat
I am building a nice content slider with the 'Owl Carousel 2' only is it possible to hide the nav buttons when there is only one or times items visible?
我正在使用“Owl Carousel 2”构建一个不错的内容滑块，当只有一个或多个项目可见时，是否可以隐藏导航按钮？
And when there is only one item or two items visible that they get a second CSS class attached on the div.item?
当只有一个或两个项目可见时，他们会在 div.item 上附加第二个 CSS 类吗？
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".
比如：当有一个项目时：class“item one”，当有两个盒子时：class="item two" 当有超过 2 个时，它只会是 class="item"。
JS:
JS：
jQuery("#sliderwhat").owlCarousel({
loop : true,
nav : true
});
HTML:
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>
回答by yanioconjota
Try this.
尝试这个。
jQuery("#sliderwhat").owlCarousel({
navigation : false, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
});
}
回答by WNDRMNT
You coulddo something like:
你可以这样做：
<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 });
}
I'm sure the ternary operator and switch statement could be combined. There, currently, isn't a disable option for the navigation for Owl Carousel 2, so this is one way to hide it.
我确信三元运算符和 switch 语句可以结合使用。目前，Owl Carousel 2 的导航没有禁用选项，因此这是隐藏它的一种方法。
回答by ByteMyPixel
Having a similar issue, I found this temporary fix for adding a disabled class: https://github.com/smashingboxes/OwlCarousel2/issues/132
有一个类似的问题，我发现这个添加禁用类的临时修复：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());
});
It works great except the "prev" nav isn't disabled on load.
除了在加载时未禁用“prev”导航之外，它效果很好。
If not work Then you have to do below this..
如果不起作用那么你必须在下面做..
In CSS:
在 CSS 中：
.owl-prev {
display: none;
}
.disabled {
display: none !important;
}
in JQ:
在 JQ 中：
$(".owl-prev").removeAttr("style");
Will work perfect..100% ?
会完美运行..100% 吗？
回答by arc_shiva
This is way what i have found out.
这就是我发现的方式。
$('.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();
}
});
回答by Sarvesh Verma
In the lateste version of OWL carousel you need to hide the nav controls like this : and it will work 100%
在 OWL carousel 的最新版本中，您需要像这样隐藏导航控件：它会 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
});
回答by Eugen Bogdanovich
If
如果
nav: false
does not work for you, try this:
不适合你，试试这个：
navText: ['', '']
whole snippet
整个片段
$('.owl-carousel').owlCarousel({
items: 1,
nav: false,
width: 'auto',
navText: ['', '']
});
