我试图在我的网站上使用猫头鹰旋转木马。我想在到达第一个/最后一个项目后禁用导航,例如添加"禁用"导航中的类然后通过CSS禁用它。可能吗?
我的代码
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
rewindNav : false,
pagination : false,
items : 4
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
});

.item { background: #e5e5e5; margin: 10px}
.btn { background: #bd0000; color: #fff; padding: 5px 10px; cursor: pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet" />
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
</div>
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
</div>
&#13;
答案 0 :(得分:16)
您可以在操作后使用回调并使用自定义控件
afterAction: function(){
if ( this.itemsAmount > this.visibleItems.length ) {
$('.next').show();
$('.prev').show();
$('.next').removeClass('disabled');
$('.prev').removeClass('disabled');
if ( this.currentItem == 0 ) {
$('.prev').addClass('disabled');
}
if ( this.currentItem == this.maximumItem ) {
$('.next').addClass('disabled');
}
} else {
$('.next').hide();
$('.prev').hide();
}
}
检查工作演示 - http://jsfiddle.net/p3d52z4n/9/
答案 1 :(得分:8)
最简单的解决方案:
OwlCarousel 2 在达到第一个/最后一个元素时为导航元素提供disabled
类。
所以你可能需要这样的东西:
.owl-nav{
.disabled{
display: none;
}
}
答案 2 :(得分:3)
我和Owl Carousel 2有同样的问题, 我的解决方案 - 使用本机导航按钮,在调用滑块后:
var elm = '.slider'; //your slider class
function toggleArrows(){
if($(elm).find(".owl-item").last().hasClass('active') &&
$(elm).find(".owl-item.active").index() == $(elm).find(".owl-item").first().index()){
$(elm).find('.owl-nav .owl-next').addClass("off");
$(elm).find('.owl-nav .owl-prev').addClass("off");
}
//disable next
else if($(elm).find(".owl-item").last().hasClass('active')){
$(elm).find('.owl-nav .owl-next').addClass("off");
$(elm).find('.owl-nav .owl-prev').removeClass("off");
}
//disable previus
else if($(elm).find(".owl-item.active").index() == $(elm).find(".owl-item").first().index()) {
$(elm).find('.owl-nav .owl-next').removeClass("off");
$(elm).find('.owl-nav .owl-prev').addClass("off");
}
else{
$(elm).find('.owl-nav .owl-next,.owl-nav .owl-prev').removeClass("off");
}
}
//turn off buttons if last or first - after change
$(elm).on('initialized.owl.carousel', function (event) {
toggleArrows();
});
$(elm).on('translated.owl.carousel', function (event) { toggleArrows(); });
至于css - 为“禁用”按钮提供“关闭”属性。
答案 3 :(得分:1)
使用猫头鹰旋转木马2为我工作
$('#owlCarousel').owlCarousel({
loop:true,
loop:false,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:true
},
1000:{
items:4,
nav:true,
touchDrag:false,
//pullDrag:false,
freeDrag:false
}
},
onTranslated:callBack
});
function callBack(){
if($('.owl-carousel .owl-item').last().hasClass('active')){
$('.owl-next').hide();
$('.owl-prev').show();
console.log('true');
}else if($('.owl-carousel .owl-item').first().hasClass('active')){
$('.owl-prev').hide();
$('.owl-next').show();
console.log('false');
}
}
$('#owlCarousel .owl-prev').hide();
答案 4 :(得分:1)
只需使用回调 -
loop:false,
navRewind: false
你会发现一个“禁用”的人。当达到第一个/最后一个项目时,类被添加到owl-next和owl-prev。添加CSS -
.owl-next.disabled, .owl-prev.disabled {
display: none !important;
}
会做到这一点。
答案 5 :(得分:0)
我正在寻找解决方案,我找到了一些代码并将它们组合在一起。它对我有用。当第一项左箭头隐藏在最后一项右箭头隐藏时。
注意.on()事件
$('.homeSlider').owlCarousel({
loop: false ,
autoplay: false,
navClass: ['fa fa-chevron-left', 'fa fa-chevron-right'],
navText: ['', ''],
margin: 20,
startPosition: -0,
items: 3,
nav: true,
dots: false,
center: false,
autoWidth: true,
responsive: {
0: {
items: 1
},
600: {
items:2,
margin: 20,
startPosition: 0,
loop: true,
autoWidth: true,
center: false
},
992: {
items: 3
},
1920: {
items: 5
}
}}).on('initialized.owl.carousel changed.owl.carousel refreshed.owl.carousel', function (event) {
//alert("s");
if (!event.namespace) return;
var carousel = event.relatedTarget,
element = event.target,
current = carousel.current();
if(current === carousel.maximum()) $('.homeSlider .fa-chevron-right').hide();
if(current === carousel.minimum()) $('.homeSlider .fa-chevron-left').hide();
});
$('.homeSlider .fa-chevron-left').hide();
答案 6 :(得分:0)
使用自定义导航在Owl Carousel 2上为我工作
onTranslated: function(event){
if (event.item.index == 0) jQuery("#owlPrev").hide();
else jQuery("#owlPrev").show();
if (event.item.index == (event.item.count - 1)) jQuery("#owlNext").hide();
else jQuery("#owlNext").show();
}
还注意到您可以使用响应式方法进行多次回调,例如:
responsive:{
0:{
items: 1,
slideBy: 1,
onTranslated: function(event){
if (event.item.index == 0) jQuery("#owlPrev").hide();
else jQuery("#owlPrev").show();
if (event.item.index == (event.item.count - 1)) jQuery("#owlNext").hide();
else jQuery("#owlNext").show();
}
},
992:{
items: 2,
slideBy: 2,
onTranslated: function(event){
if (event.item.index === 0) jQuery("#owlPrev").hide();
else jQuery("#owlPrev").show();
if (event.item.index == (event.item.count / 2)) jQuery("#owlNext").hide();
else jQuery("#owlNext").show();
}
}
}
答案 7 :(得分:0)
如前所述,您可以使用Owl的回调来隐藏或更改“下一步”按钮。但是,与其使用某些disabled
类来告诉用户不再使用按钮,您实际上可以非常简单地将其禁用:
$slider.on('changed.owl.carousel', ev => {
const carousel = ev.currentTarget
$('.owl-next', $el).attr('disabled', carousel.current() === carousel.maximum())
$('.owl-prev', $el).attr('disabled', carousel.current() === carousel.minimum())
})
您可以使用CSS选择器[disabled]
为禁用的按钮设置样式。
答案 8 :(得分:0)
$('.owl-carousel').each(function (e) {
var owl = $(this);
if (!owl.data('owl.carousel').options.loop) {
var options = owl.data('owl.carousel').options;
owl.trigger('destroy.owl.carousel');
owl.owlCarousel(options).on('changed.owl.carousel', ev => {
if (!event.namespace) return;
var carousel = event.relatedTarget,
element = event.target,
current = carousel.current();
setTimeout(function () {
$('.owl-next').toggleClass('disabled', current === carousel.maximum());
$('.owl-prev').toggleClass('disabled', current === carousel.minimum());
}, 1);
});
}
});
css
.owl-next.disabled, .owl-prev.disabled {
display: none !important;
}
或您想要的