Javascript 猫头鹰旋转木马，到达第一个/最后一个项目后禁用导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25894585/
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
Owl Carousel, navigation disabled after reaching first/last item
提问by owari
I'm trying to use owl carousel for my website. I want to disable the navigation after it reach first/last item, for example by adding "disabled" class in navigation then disable it via css. Is it possible?
我正在尝试为我的网站使用 owl carousel。我想在到达第一个/最后一个项目后禁用导航，例如通过在导航中添加“禁用”类然后通过 css 禁用它。是否可以？
my code
我的代码
$(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>回答by Hovhannes Sargsyan
You can use callbak afterAction and with your custom controls
您可以使用 callbak afterAction 和您的自定义控件
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();
}
}
Check the working demo - http://jsfiddle.net/p3d52z4n/9/
检查工作演示 - http://jsfiddle.net/p3d52z4n/9/
回答by Nottenga
Simplest solution:
最简单的解决方案：
OwlCarousel 2gives disabledclass to nav elements when the first/last element is reached.
当到达第一个/最后一个元素时，OwlCarousel 2为disabled导航元素提供类。
So you could just need something like that:
所以你可能只需要这样的东西：
.owl-nav{
.disabled{
display: none;
}
}
回答by Vishal Kumar
Simply use callbacks-
只需使用回调 -
loop:false,
navRewind: false
You'll notice that a 'disabled' class is added to owl-next and owl-prev when the first/last item is reached. Adding CSS-
您会注意到，当到达第一个/最后一个项目时，会向 owl-next 和 owl-prev 添加一个“禁用”类。添加 CSS-
.owl-next.disabled, .owl-prev.disabled {
display: none !important;
}
will do the trick.
会做的伎俩。
回答by Artipixel
I had the same issue with Owl Carousel 2, My solution - with the native navigation buttons, after calling the slider:
我在 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(); });
As for the css - give the class "off" the properties you want for disabled button.
至于 css - 为类“关闭”禁用按钮所需的属性。
回答by Brahmanand Gorati
It's Working for me using Owl Carousel 2
使用 Owl Carousel 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();
回答by Ahmet U?ur
I was searching to solution , i found some code and i combine them. Its works for me. when first item left arrow hiding when last item right arrow hiding.
我正在寻找解决方案，我找到了一些代码并将它们组合起来。它对我有用。当第一项向左箭头隐藏时 当最后一项向右箭头隐藏时。
Attention to .on() event
注意 .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();
回答by sbalbous
Working for me on Owl Carousel 2 with custom navigation
使用自定义导航在 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();
}
Also noticed that you can have several callbacks with the responsive approach like :
还注意到您可以使用响应式方法进行多个回调，例如：
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();
}
}
}
回答by wortwart
As said befor, you can use Owl's callbacks to hide or change the "Next" button. But instead of using some disabledclass to tell the user the button should not be used anymore you can actually disable it very simply:
如前所述，您可以使用 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())
})
You can style the disabled button with the CSS selector [disabled].
您可以使用 CSS 选择器设置禁用按钮的样式[disabled]。
