twitter-bootstrap 引导轮播。在第一张和最后一张幻灯片上隐藏“上一张”和“下一张”按钮 - “幻灯片”事件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33357640/
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
Bootstrap carousel. Hide 'previous' and 'next' buttons on first and last slide - 'slide' event not working
提问by Chris Halcrow
I'm using this standard Bootstrap carousel:
我正在使用这个标准的 Bootstrap 轮播：
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption">
<h1>App Preview</h1>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Contact Details</h1>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Choose plan</h1>
</div>
</div>
<div class="item">
4
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
@*<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>*@
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
@*<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>*@
<span class="sr-only">Next</span>
</a>
</div>
and I'm trying to hide the 'previous' and 'next' buttons respectively, if the user is on the first or last items of the carousel:
如果用户在轮播的第一个或最后一个项目上，我试图分别隐藏“上一个”和“下一个”按钮：
$('.carousel').carousel({
interval: false,
})
$('#myCarousel').on('slid', '', checkitem);
function checkitem() // check function
{
var $this = $('#myCarousel');
if ($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if ($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
It doesn't work though. When I debug using the Chrome developer tools, I can see the event being hooked up, but the breakpoint in the actual checkitem() code is never hit, so I'm not sure if the debugger just doesn't work when events are triggered or if the event is never being triggered.
虽然它不起作用。当我使用 Chrome 开发人员工具进行调试时，我可以看到事件被连接起来，但实际 checkitem() 代码中的断点从未被命中，所以我不确定当事件被触发时调试器是否不起作用或者如果事件从未被触发。
(I'm including the following scripts)
（我包括以下脚本）
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
回答by Chris Halcrow
This is the full script to get this working fully, not just after the slide is triggered. As pointed out by Mihai, for some reason I need to use the slid.bs.carousel event not 'slid':
这是使此功能完全运行的完整脚本，而不仅仅是在触发幻灯片之后。正如 Mihai 所指出的，出于某种原因，我需要使用 slid.bs.carousel 事件而不是 'slid'：
$('.carousel').carousel({
interval: false,
})
$(document).ready(function () { // on document ready
checkitem();
});
$('#myCarousel').on('slid.bs.carousel', checkitem);
function checkitem() // check function
{
var $this = $('#myCarousel');
if ($('.carousel-inner .item:first').hasClass('active')) {
// Hide left arrow
$this.children('.left.carousel-control').hide();
// But show right arrow
$this.children('.right.carousel-control').show();
} else if ($('.carousel-inner .item:last').hasClass('active')) {
// Hide right arrow
$this.children('.right.carousel-control').hide();
// But show left arrow
$this.children('.left.carousel-control').show();
} else {
$this.children('.carousel-control').show();
}
}
Carousel events documentation - getbootstrap.com/javascript/#carousel-events
轮播事件文档 - getbootstrap.com/javascript/#carousel-events
回答by Mihai Alex
Try using
尝试使用
$('#myCarousel').on('slid.bs.carousel', checkitem);
But this will hide your buttons only when a "slid" event occurs. It works well for the last "next" but it doesn't hide the first "previous". To hide the first "previous" you could use CSS.
但这只会在“滑动”事件发生时隐藏您的按钮。它适用于最后一个“下一个”，但它不会隐藏第一个“上一个”。要隐藏第一个“上一个”，您可以使用 CSS。
回答by bass-t
Some years old, but Bootstrap's carousel is still valuable I suppose.
有些年头了，但我想 Bootstrap 的旋转木马仍然很有价值。
Chris' answer is good, it only misses the case when there is only 1 item to show (would still show the right arrow then). Also, we could use jQuery's toggle function that takes a boolean parameter to spare the ifs.
克里斯的回答很好，它只会错过只有 1 个项目要显示的情况（那时仍会显示右箭头）。此外，我们可以使用带有布尔参数的 jQuery 切换函数来节省 ifs。
The more precise and shorter solution would then be:
更精确和更短的解决方案是：
$(document).ready(function () {
checkControls();
});
$('#myCarousel').on('slid.bs.carousel', checkControls);
// Hide left / right control if carousel is at first / last position.
function checkControls() {
var $this = $('#profilepicsCarousel');
$this.children('.carousel-control-prev').toggle(
!$this.find('.carousel-inner .carousel-item:first-child').hasClass('active')
);
$this.children('.carousel-control-next').toggle(
!$this.find('.carousel-inner .carousel-item:last-child' ).hasClass('active')
);
}
回答by Kiran Mali
Try Slick slider https://kenwheeler.github.io/slick/. It has almost every feature. Including button disable, customization and responsive.
尝试 Slick 滑块https://kenwheeler.github.io/slick/。它几乎具有所有功能。包括按钮禁用、自定义和响应。
In button disable case, you need to infinite: falseoption of slick slider
在按钮禁用情况下，您需要infinite: false选择光滑的滑块
