Bootstrap轮播最后一项会隐藏右控
Bootstrap carousel last item will hide right control
我正在使用 bootstrap 4.0 版本。我想隐藏第一项的左控件,并隐藏最后一项的右控件。
我觉得用jQuery可以解决
左控件会一直隐藏,只在最后一项显示。右控件会一直显示,但隐藏在最后一项。
HTML:
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
Slide 1
</div>
<div class="carousel-item">
Slide 2
</div>
<div class="carousel-item">
Slide 3
</div>
</div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
JQuery:
$('.carousel').carousel({
interval: false,
})
function checkitem()
{
var $this = $('#carousel-1');
if ($('.carousel-inner .carousel-item:first').hasClass('active')) {
$this.children('.carousel-control-prev').hide();
} else if ($('.carousel-inner .carousel-item:last').hasClass('active')) {
$this.children('.carousel-control-next').hide();
} else {
$this.children('.carousel-control').show();
}
}
您可以使用 data-wrap="false"
属性停止从最后一项或第一项向前或向后。
$(document).ready(function(){
// When strating hide prev arrow
$('.carousel-control-prev').hide();
});
$('#carousel-1').on('slide.bs.carousel', function (e) {
var slidingItemsAsIndex = $('.carousel-item').length - 1;
// If last item hide next arrow
if($(e.relatedTarget).index() == slidingItemsAsIndex ){
$('.carousel-control-next').hide();
}
else{
$('.carousel-control-next').show();
}
// If first item hide prev arrow
if($(e.relatedTarget).index() == 0){
$('.carousel-control-prev').hide();
}
else{
$('.carousel-control-prev').show();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="carousel-1" class="carousel slide" data-ride="carousel" data-wrap="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img width="900" src="https://cdn.mos.cms.futurecdn.net/FUE7XiFApEqWZQ85wYcAfM-970-80.jpg"/>
</div>
<div class="carousel-item">
<img width="900" src=" https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81a5f1725ca68c549e0054dcfdf269de&auto=format&fit=crop&w=1350&q=80"/>
</div>
<div class="carousel-item">
<img width="900" src="https://cdn.mos.cms.futurecdn.net/3YKAsCxSpoqFUEHyrQyfLb-650-80.jpg"/>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
我删除了 data-ride="carousel"
所以它不会自动启动,设置 interval: false
和 wrap: false
。
将 .d-none
(Bootstrap class) 添加到 control
中,以便它们开始隐藏。
如果至少有两项,则显示 next
控件。
然后,在每个 slide 上,我们检查下一个位置并相应地显示 control
。
var carouselLength = $('.carousel-item').length - 1;
// If there is more than one item
if (carouselLength) {
$('.carousel-control-next').removeClass('d-none');
}
$('.carousel').carousel({
interval: false,
wrap: false
}).on('slide.bs.carousel', function (e) {
// First one
if (e.to == 0) {
$('.carousel-control-prev').addClass('d-none');
$('.carousel-control-next').removeClass('d-none');
} // Last one
else if (e.to == carouselLength) {
$('.carousel-control-prev').removeClass('d-none');
$('.carousel-control-next').addClass('d-none');
} // The rest
else {
$('.carousel-control-prev').removeClass('d-none');
$('.carousel-control-next').removeClass('d-none');
}
});
.carousel {
background-color: #ddd;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="carousel-1" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
Slide 1
</div>
<div class="carousel-item">
Slide 2
</div>
<div class="carousel-item">
Slide 3
</div>
</div>
<a class="carousel-control-prev d-none" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next d-none" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
如果你使用 data-ride="false":
这里有一个通用的解决方案
$('.carousel[data-ride="false"]').each(function(){
$(this).find('.carousel-control-prev').hide();
$(this).on('slide.bs.carousel', function (e) {
var slidingItemsAsIndex = $(this).find('.carousel-item').length - 1;
// If last item hide next arrow
if($(e.relatedTarget).index() == slidingItemsAsIndex ){
$(this).find('.carousel-control-next').hide();
}
else{
$(this).find('.carousel-control-next').show();
}
if($(e.relatedTarget).index() == 0){
$(this).find('.carousel-control-prev').hide();
}
else{
$(this).find('.carousel-control-prev').show();
}
});
});
我正在使用 bootstrap 4.0 版本。我想隐藏第一项的左控件,并隐藏最后一项的右控件。 我觉得用jQuery可以解决
左控件会一直隐藏,只在最后一项显示。右控件会一直显示,但隐藏在最后一项。
HTML:
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
Slide 1
</div>
<div class="carousel-item">
Slide 2
</div>
<div class="carousel-item">
Slide 3
</div>
</div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
JQuery:
$('.carousel').carousel({
interval: false,
})
function checkitem()
{
var $this = $('#carousel-1');
if ($('.carousel-inner .carousel-item:first').hasClass('active')) {
$this.children('.carousel-control-prev').hide();
} else if ($('.carousel-inner .carousel-item:last').hasClass('active')) {
$this.children('.carousel-control-next').hide();
} else {
$this.children('.carousel-control').show();
}
}
您可以使用 data-wrap="false"
属性停止从最后一项或第一项向前或向后。
$(document).ready(function(){
// When strating hide prev arrow
$('.carousel-control-prev').hide();
});
$('#carousel-1').on('slide.bs.carousel', function (e) {
var slidingItemsAsIndex = $('.carousel-item').length - 1;
// If last item hide next arrow
if($(e.relatedTarget).index() == slidingItemsAsIndex ){
$('.carousel-control-next').hide();
}
else{
$('.carousel-control-next').show();
}
// If first item hide prev arrow
if($(e.relatedTarget).index() == 0){
$('.carousel-control-prev').hide();
}
else{
$('.carousel-control-prev').show();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="carousel-1" class="carousel slide" data-ride="carousel" data-wrap="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img width="900" src="https://cdn.mos.cms.futurecdn.net/FUE7XiFApEqWZQ85wYcAfM-970-80.jpg"/>
</div>
<div class="carousel-item">
<img width="900" src=" https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81a5f1725ca68c549e0054dcfdf269de&auto=format&fit=crop&w=1350&q=80"/>
</div>
<div class="carousel-item">
<img width="900" src="https://cdn.mos.cms.futurecdn.net/3YKAsCxSpoqFUEHyrQyfLb-650-80.jpg"/>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
我删除了 data-ride="carousel"
所以它不会自动启动,设置 interval: false
和 wrap: false
。
将 .d-none
(Bootstrap class) 添加到 control
中,以便它们开始隐藏。
如果至少有两项,则显示 next
控件。
然后,在每个 slide 上,我们检查下一个位置并相应地显示 control
。
var carouselLength = $('.carousel-item').length - 1;
// If there is more than one item
if (carouselLength) {
$('.carousel-control-next').removeClass('d-none');
}
$('.carousel').carousel({
interval: false,
wrap: false
}).on('slide.bs.carousel', function (e) {
// First one
if (e.to == 0) {
$('.carousel-control-prev').addClass('d-none');
$('.carousel-control-next').removeClass('d-none');
} // Last one
else if (e.to == carouselLength) {
$('.carousel-control-prev').removeClass('d-none');
$('.carousel-control-next').addClass('d-none');
} // The rest
else {
$('.carousel-control-prev').removeClass('d-none');
$('.carousel-control-next').removeClass('d-none');
}
});
.carousel {
background-color: #ddd;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="carousel-1" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
Slide 1
</div>
<div class="carousel-item">
Slide 2
</div>
<div class="carousel-item">
Slide 3
</div>
</div>
<a class="carousel-control-prev d-none" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next d-none" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
如果你使用 data-ride="false":
这里有一个通用的解决方案 $('.carousel[data-ride="false"]').each(function(){
$(this).find('.carousel-control-prev').hide();
$(this).on('slide.bs.carousel', function (e) {
var slidingItemsAsIndex = $(this).find('.carousel-item').length - 1;
// If last item hide next arrow
if($(e.relatedTarget).index() == slidingItemsAsIndex ){
$(this).find('.carousel-control-next').hide();
}
else{
$(this).find('.carousel-control-next').show();
}
if($(e.relatedTarget).index() == 0){
$(this).find('.carousel-control-prev').hide();
}
else{
$(this).find('.carousel-control-prev').show();
}
});
});