我目前正在尝试在没有图像的情况下从轮播中删除箭头。我之所以这样做,仅仅是因为我试图将多个图像从数据库加载到轮播中,并进入给定的部分。本节将被多次创建,并且并不总是包含图像。
我遇到的问题是,每当引导轮播没有加载任何图像时,它只会在侧面显示轮播箭头。这使当前部分看起来很糟,我希望将其丢弃。
没有任何图像时,如何删除轮播箭头
装在轮播中?
这是一个JsFiddle,其中包含我到目前为止所做的事情,它受到其他几篇文章的启发。这只会删除第一张幻灯片上的左箭头和最后一张幻灯片上的右箭头。
在这里,您可以预览没有图像时轮播的外观。我设置了400px的黑色背景,以便更容易发现箭头。 Absent Images JsFiddle
这是我到目前为止的代码:
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-8" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" id="arrow-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
jQuery代码:
jQuery(document).ready(function($) {
$('.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')) {
$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();
}
}
$("img").error(function(){
$(this).hide('#arrow-right');
});
});
以下是我已经检查过的解决方案的答案:
Link 1 Link 2
先感谢您。
最佳答案
使用jQuery,您可以尝试类似的方法。
$(document).ready(function(){
if($('.carousel-inner .item img').attr('src') == '') {
$('.carousel-control').css('display', 'none');
}
});
fiddle