引导转盘在第一张图片上向左滑动时消失
Bootstrap carousel disappears sliding left on first image
我有5个带有相同标记的转盘,其中4个有相同的问题。如果你向左滑动第一个项目,任何"项目"类的"活动"类都会消失,所以旋转木马本身也会消失。我已经检查这个问题两天了,但无法处理。
基本上,转盘标记就是这样的:
<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>
您不能将此代码保存在"内部转盘"div 中
<a href="javascript:void(0)" class="project-close-btn"></a>
<span class="project-name-box">ERENKÖY APARTMANI</span>
这使得转盘不滑动
我想您在某个地方出现了一些javascript错误。
当你点击右键时,你在新的图像Div容器上设置了一个活动类:
<div class="item active">
当您单击左侧时,您将在标题上设置为活动
<span class="project-name-box active">DRS YAPI <br> OFİSİ</span>
这里的一个丑陋的解决方法是从第一张幻灯片禁用向左导航。
首先找出将该事件与所有其他基于转盘的事件区分开来的特定条件。然后有条件地执行e.preventDefault()
$('#carousel').on('slide.bs.carousel', function (e) {
if (e.type == "slide" && e.direction == "right" && e.relatedTarget.className != "item"){
return e.preventDefault();
}
})
很难看,但它可以防止问题完全折叠滑块。
相关文章:
- 有人能提供一张ember数据与broswer's的持久层
- jQuery只隐藏<tr>在一张桌子上
- 如何从三张图片中选择一张?其余的必须是看不见的
- 通过onclick事件将一张图片更改为6张图片
- Sequelize hasMany浏览另一张表
- jm按下停止步骤进入滚动的下一张幻灯片
- 我用JavaScript FIleReader读了一张图片,但是我无法得到图片的信息
- 当 Flickity 到达下一张或上一张幻灯片时的事件
- 单击从一张图像切换到两张图像,然后再切换回一张图像
- 单击另一张图像,显示一张图像几秒钟
- 为什么bxSlider会打断我在最后一张幻灯片和第一张幻灯片之间的转换
- 用d3和topojson绘制一张地图
- 引导程序3转盘-随机选择下一张幻灯片
- 每张图片都比前一张少
- HTML5画布如何在另一张图片上绘制一张图片
- 拍摄一张巨大的网页截图(大小超过1350x13500px)
- 如何在最后一张幻灯片上停止动画
- 完整的背景图片幻灯片jquery,想让幻灯片的最后一张图片可以点击
- jqplot只在一张图表上显示荧光笔
- Nivo滑块:滑块在最后一张幻灯片后消失,并在30秒左右后再次显示.为什么