引导轮播在第一张图像上向左滑动消失答案

【问题标题】：Bootstrap carousel disappears sliding left on first image引导轮播在第一张图像上向左滑动消失
【发布时间】：2014-09-12 02:05:40
【问题描述】：

我有 5 个带有相同标记的轮播，其中 4 个有相同的问题。如果您向左滑动第一个项目，则任何“项目”类的“活动”类都会消失，因此轮播本身也会消失。我已经检查了 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>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您不能将此代码保留在“carousel-inner”div 中

 <a href="javascript:void(0)" class="project-close-btn"></a>
 <span class="project-name-box">ERENKÖY APARTMANI</span>

那是让旋转木马不滑动

【讨论】：

【解决方案2】：

我猜你在某处遇到了一些 javascript 错误。

当你点击右键时，你在新的图像 Div 容器上设置了一个活动类：

<div class="item active">

当您单击左键时，您会在标题上设置为活动状态

<span class="project-name-box active">DRS YAPI <br> OFİSİ</span>

【讨论】：

【解决方案3】：

这里有一个丑陋的解决方法，即从第一张幻灯片禁用向左导航。

首先找出将该事件与所有其他基于轮播的事件区分开来的特定条件。然后有条件地执行e.preventDefault()

$('#carousel').on('slide.bs.carousel', function (e) {
  if (e.type == "slide" && e.direction == "right" && e.relatedTarget.className != "item"){
    return e.preventDefault();
  }
})

丑陋，但它可以防止问题完全折叠滑块。

【讨论】：