twitter-bootstrap 如何禁用轮播最后一张幻灯片上的按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24553624/
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
How can I disable a button at the last slide of a carousel?
提问by anyavacy
I am using bootstrap carousel and I want to stop the carousel from sliding when it reaches the last slide ( stop at the last slide), and then disable the "next" button
我正在使用引导轮播，我想在轮播到达最后一张幻灯片时停止滑动（停在最后一张幻灯片），然后禁用“下一步”按钮
回答by jme11
To disable the carousel from "wrapping" there's an option. You can either set data-wrap="false" on the carousel or just put it in the options when you initialize the carousel.
要从“包装”中禁用轮播，有一个选项。您可以在轮播上设置 data-wrap="false" ，也可以在初始化轮播时将其放入选项中。
To handle the disabling of the next/previous buttons, I think the answer from Naliza works fine, but it's an awful lot of code. Here's a shorter version that handles setting the wrap property to false as well:
为了处理下一个/上一个按钮的禁用，我认为 Naliza 的答案很好，但是代码太多了。这是一个较短的版本，它也处理将 wrap 属性设置为 false ：
jQueryto initialize carousel and show/hide previous/next arrows:
jQuery初始化轮播和显示/隐藏上一个/下一个箭头：
$('.carousel').carousel({
wrap: false
}).on('slid.bs.carousel', function () {
curSlide = $('.active');
if(curSlide.is( ':first-child' )) {
$('.left').hide();
return;
} else {
$('.left').show();
}
if (curSlide.is( ':last-child' )) {
$('.right').hide();
return;
} else {
$('.right').show();
}
});
Since the event handler only runs after the carousel slides, you want to set the .left to display: none in your css so when the carousel is displayed when the page is loaded the left arrow is hidden. Then as soon as the carousel slides for the first time, the code above will display the left arrow.
由于事件处理程序仅在轮播滑动后运行，因此您希望在 css 中将 .left 设置为 display: none 以便在加载页面时显示轮播时隐藏左箭头。然后只要轮播第一次滑动，上面的代码就会显示向左箭头。
CSS:
CSS：
.left {
display: none;
}
I won't include the HTML as this is designed to work with boilerplate Bootstrap carousel markup.
我不会包含 HTML，因为它旨在与样板 Bootstrap 轮播标记一起使用。
DEMO
演示
回答by Naliza
Take a look at this -> http://www.bootply.com/0i7STdt3Ex
看看这个 - > http://www.bootply.com/0i7STdt3Ex
You just need to check if the item in carousel is last when it's sliding
您只需要检查旋转木马中的项目是否在滑动时最后一次
回答by Rajko Markovi?
I've combined both Naliza's and jme11's code, just to add the part where the first (left) control gets removed as soon as your page loads. In my case I've used it for a modal.
我结合了 Naliza 和 jme11 的代码，只是为了添加在页面加载后立即删除第一个（左）控件的部分。就我而言，我将它用于模态。
$('.carousel-sync').carousel('cycle');
$('.carousel-sync').on('click', '.carousel-control[data-slide]', function (ev) {
ev.preventDefault();
$('.carousel-sync').carousel($(this).data('slide'));
});
$('.carousel').carousel({wrap: false}).on('slid.bs.carousel', function () {
var $this = $(this);
$this.children('.carousel-control').show();
if ($('.carousel-inner .item:last').hasClass('active')) {
$('#carousel-b').carousel('pause');
$this.children('.right.carousel-control').hide();
} else if ($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
}
});
回答by Felix
jme11's code is not working for 2 slides, if you switch forth and back both buttons disappear. here is a changed version:
jme11 的代码不适用于 2 张幻灯片，如果前后切换，两个按钮都会消失。这是一个更改的版本：
$('.carousel').carousel({
wrap: false
}).on('slid.bs.carousel', function () {
curSlide = $('.active');
if (curSlide.is(':first-child')) {
$('.left').hide();
$('.right').show();
} else if (curSlide.is(':last-child')) {
$('.right').hide();
$('.left').show();
} else {
$('.left').show();
$('.right').show();
}
});
回答by Devil Bro
You can disable navigation arrow instead of hide by adding style through script.
您可以通过脚本添加样式来禁用导航箭头而不是隐藏。
$('.carousel').carousel({
}).on('slid.bs.carousel', function () {
currentSlide = $('.active');
if(currentSlide.is( ':first-child' )) {
$('.carousel-control-prev').css('pointer-events', 'none');
return;
} else {
$('.carousel-control-prev').css('pointer-events', 'auto');
}
if (currentSlide.is( ':last-child' )) {
$('.carousel-control-next').css('pointer-events', 'none');
return;
} else {
$('.carousel-control-next').css('pointer-events', 'auto');
}
});
回答by Kiran Mali
Try Slick slider https://kenwheeler.github.io/slick/. It has almost every feature. Including button disable and customization.
尝试 Slick 滑块https://kenwheeler.github.io/slick/。它几乎具有所有功能。包括按钮禁用和自定义。
In button disable case, you need to infinite: falseoption of slick slider
在按钮禁用情况下，您需要infinite: false选择光滑的滑块
