好吧,最近发生了这种情况,我不太清楚为什么。所以我使用 Bootstrap 轮播,这是解释它的最佳方式: 有 2 张幻灯片,用户在第二张幻灯片上,如果他们单击 > 字形图标转到下一张幻灯片,整个轮播就会消失(因为没有幻灯片)我该如何解决此问题?这是我当前的标记:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<div style="margin-left: 2em" class="carousel-indicators">
</div>
<div class="carousel-inner">
<div class='item active'>
<img src='' alt='Updates + Helper rank' />
<div class='container'>
<div class='carousel-caption'>
<h1>
Updates + Helper rank
</h1>
<p>
text here
</p>
</div>
</div>
</div>
<div class='item'>
<img src='' alt='Website Updates & News Prune' />
<div class='container'>
<div class='carousel-caption'>
<h1>
Website Updates & News Prune
</h1>
<p>
text here
</p>
</div>
</div>
</div><a class="left carousel-control" href="#myCarousel" data-slide="prev"></a> <a class="right carousel-control" href= "#myCarousel" data-slide="next"></a>
</div>
</div>
谢谢!
编辑:还想知道是否有人知道我如何阻止它自动滑动?
最佳答案
问题是,当轮播控件应该位于外部时,它们却位于 .carousel-inner
容器内。此外,无需在标题内使用 .container
元素。最后,为了避免轮播自动循环,您可以将data-interval
属性设置为“false”
。
修改后的标记应如下所示:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<div style="margin-left: 2em" class="carousel-indicators"> </div>
<div class="carousel-inner">
<div class='item active'>
<img src='http://placehold.it/500x300' alt='Updates + Helper rank' />
<div class='carousel-caption'>
<h1>
Updates + Helper rank
</h1>
<p>text here</p>
</div>
</div>
<div class='item'>
<img src='http://placehold.it/500x300' alt='Website Updates & News Prune' />
<div class='carousel-caption'>
<h1>Website Updates & News Prune</h1>
<p>text here</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"></a>
</div>
这是一个 working demo
关于html - Bootstrap 轮播在最后一张幻灯片后消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19719093/