Bootstrap輪播在第一張圖像上向左滑動消失

Question

我有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>

Answer 1

您不能將此代碼保留在“carousel-inner”div中

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

這使得旋轉木馬不會滑動

Answer 2

我想你在某處有一些javascript錯誤。

單擊右鍵時，在新圖像Div容器上設置活動類：

<div class="item active">

當您單擊左鍵時，您在標題上設置了活動

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

Answer 3

這是一個丑陋的解決方法，它禁用第一張幻燈片的左向導航。

首先找出將該事件與所有其他基於輪播的事件分開的特定條件。 然后有條件地執行e.preventDefault()

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

丑陋，但它可以防止問題完全折疊滑塊。