Korsel bootstrap menghilang dengan menggeser ke kiri pada gambar pertama

Saya memiliki 5 carousel dengan markup yang sama dan 4 di antaranya memiliki masalah yang sama. Jika Anda menggeser item pertama ke kiri, kelas 'aktif' dari kelas 'item' mana pun akan hilang, sehingga carousel itu sendiri juga akan hilang. Saya telah memeriksa masalahnya selama 2 hari tetapi tidak dapat mengatasinya.

Pada dasarnya, markup carouselnya seperti ini:

<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="/idjavascript: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="/id#project-gallery-carousel-4" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                  <a class="right carousel-control" href="/id#project-gallery-carousel-4" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

                  <a href="/id#" class="project-close-bar dn">KAPAT</a>

                </div>

javascript html jquery css twitter-bootstrap
person Can Goktas    schedule 28.04.2014    source sumber

Jawaban (3)


arrow_upward
2
arrow_downward

Anda tidak dapat menyimpan kode ini di dalam div "carousel-inner".

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

Itu membuat carousel tidak tergelincir

person k360    schedule 28.04.2014

arrow_upward
0
arrow_downward

Saya kira Anda mengalami kesalahan javascript di suatu tempat.

Saat Anda mengklik kanan, Anda menetapkan kelas aktif pada wadah Div gambar baru:

<div class="item active">

Ketika Anda mengklik kiri, Anda mengaktifkan judulnya

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

person Thor    schedule 28.04.2014

arrow_upward
0
arrow_downward

Solusi buruk di sini adalah menonaktifkan navigasi arah kiri dari slide pertama.

Pertama, cari tahu kondisi khusus apa yang membedakan acara tersebut dari semua acara berbasis carousel lainnya. Kemudian jalankan secara kondisional e.preventDefault()

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

Jelek, tapi ini mencegah masalah menciutkan slider sepenuhnya.

person Mart Van de Ven    schedule 11.09.2014