ม้าหมุน Bootstrap หายไปเลื่อนไปทางซ้ายในภาพแรก

ฉันมีภาพหมุน 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="/thjavascript: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="/th#project-gallery-carousel-4" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                  <a class="right carousel-control" href="/th#project-gallery-carousel-4" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

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

                </div>

javascript html jquery css twitter-bootstrap
person Can Goktas    schedule 28.04.2014    source แหล่งที่มา

คำตอบ (3)


arrow_upward
2
arrow_downward

คุณไม่สามารถเก็บโค้ดนี้ไว้ใน div "carousel-inner" ได้

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

นั่นทำให้ม้าหมุนไม่เลื่อน

person k360    schedule 28.04.2014

arrow_upward
0
arrow_downward

ฉันเดาว่าคุณมีข้อผิดพลาดจาวาสคริปต์อยู่ที่ไหนสักแห่ง

เมื่อคุณคลิกขวา คุณจะตั้งค่าคลาสที่ใช้งานอยู่บนคอนเทนเนอร์ Div รูปภาพใหม่:

<div class="item active">

เมื่อคุณคลิกซ้าย คุณจะตั้งค่าการใช้งานในชื่อ

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

person Thor    schedule 28.04.2014

arrow_upward
0
arrow_downward

วิธีแก้ปัญหาที่น่าเกลียดที่นี่คือการปิดใช้งานการนำทางด้านซ้ายจากสไลด์แรก

ขั้นแรก ให้ค้นหาเงื่อนไขเฉพาะที่แยกเหตุการณ์นั้นออกจากเหตุการณ์แบบหมุนอื่นๆ ทั้งหมด จากนั้นดำเนินการตามเงื่อนไข e.preventDefault()

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

น่าเกลียด แต่มันป้องกันไม่ให้ปัญหายุบตัวเลื่อนโดยสิ้นเชิง

person Mart Van de Ven    schedule 11.09.2014