我有5个带有相同标记的轮播,其中4个具有相同的问题。如果你向左滑动第一个项目,任何'item'类的'active'类都会消失,因此,轮播本身也会消失。我一直在检查这个问题2天但是无法处理它。
基本上,轮播标记就像这样:
<div id="project-gallery-carousel-4" class="carousel slide gallery-carousel" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<a href="javascript:void(0)" class="project-close-btn"></a>
<span class="project-name-box">ERENKÖY APARTMANI</span>
<div class="item active">
<img src="images/certum/001.jpg">
<div class="carousel-caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, numquam, quia, eaque, soluta cum totam suscipit voluptatem possimus esse corporis ad odit accusantium minima enim sequi officiis tenetur tempore dignissimos.</p>
</div>
</div>
<div class="item">
<img src="images/certum/002.jpg">
<div class="carousel-caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, libero accusamus alias nemo voluptas quas dicta minus omnis architecto. Et, ab inventore assumenda doloremque corrupti libero placeat facere eaque in.</p>
</div>
</div>
<div class="item">
<img src="images/certum/003.jpg">
<div class="carousel-caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, libero accusamus alias nemo voluptas quas dicta minus omnis architecto. Et, ab inventore assumenda doloremque corrupti libero placeat facere eaque in.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#project-gallery-carousel-4" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#project-gallery-carousel-4" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" class="project-close-bar dn">KAPAT</a>
</div>
答案 0 :(得分:2)
您无法将此代码保留在“carousel-inner”div
中 <a href="javascript:void(0)" class="project-close-btn"></a>
<span class="project-name-box">ERENKÖY APARTMANI</span>
这使得旋转木马不会滑动
答案 1 :(得分:0)
我猜你在某个地方遇到了一些javascript错误。
单击右键时,在新图像Div容器上设置活动类:
<div class="item active">
当您单击左键时,您将在标题
上设置为活动状态 <span class="project-name-box active">DRS YAPI <br> OFİSİ</span>
答案 2 :(得分:0)
这是一个丑陋的解决方法,它禁用了第一张幻灯片的左向导航。
首先找出将该事件与所有其他基于轮播的事件分开的特定条件。然后有条件地执行e.preventDefault()
$('#carousel').on('slide.bs.carousel', function (e) {
if (e.type == "slide" && e.direction == "right" && e.relatedTarget.className != "item"){
return e.preventDefault();
}
})
很丑,但它可以防止问题完全折叠滑块。