Question

此Bootstrap照片轮播上的旋转木马指示灯的工作原理是它们在点击时会相应地更改照片;然而，如果我点击第三个旋转木马指示器，它们不起作用，第一个旋转木马指示器保持稳定，而第三个旋转木马指示器保持透明。关于为什么会发生这种情况的任何想法？

<div id="photos_overlay">
    <div class="container-fluid">
        <div class="row">
                <div class="cta-overlay col-lg-4 col-md-5 col-sm-6">
                    <h1>Freshwater Ranch</h1>
                    <h4>Freshwater Ranch is located deep within the heart of the Rocky Mountains. The luxury accommodations and equine facilities on this 450-acre ranch were designed to support personal and professional getaways alike, and the awe-inspiring views of the Sawatch and Sangre de Cristo mountain ranges allow for a unique mountain experience. Join us and prepare to be inspired!</h4>
                </div>
                <ol class="carousel-indicators">
                    <li data-target="#rotating_photos" data-slide-to="0" class="active"></li>
                    <li data-target="#rotating_photos" data-slide-to="1"></li>
                    <li data-target="#rotating_photos" data-slide-to="2"></li>
                    <li data-target="#rotating_photos" data-slide-to="3"></li>
                </ol>
        </div>
    </div>

    <div class="photo_body carousel slide" data-ride="carousel" id="rotating_photos">
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/ranchhouseview1.jpg" alt="Indoor Arena Photo">
            </div>
            <div class="item">
                <img src="images/view4.jpg" alt="Indoor Arena Photo">
            </div>
            <div class="item">
                <img src="images/horse.jpg" alt="Horse Photo">
            </div>
            <div class="item">
                <img src="images/view5.jpg" alt="Mountain Photo">
            </div>
        </div><!--carousel inner-->
    </div><!--carousel outer-->
</div>

Answer 1

您的carousel-indicators必须在carousel div内，如下所示：

<div class="photo_body carousel slide" data-ride="carousel" id="rotating_photos">
  <ol class="carousel-indicators">
    <li data-target="#rotating_photos" data-slide-to="0" class="active"></li>
    <li data-target="#rotating_photos" data-slide-to="1"></li>
    <li data-target="#rotating_photos" data-slide-to="2"></li>
    <li data-target="#rotating_photos" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/ranchhouseview1.jpg" alt="Indoor Arena Photo">
    </div>
    <div class="item">
      <img src="images/view4.jpg" alt="Indoor Arena Photo">
    </div>
    <div class="item">
      <img src="images/horse.jpg" alt="Horse Photo">
    </div>
    <div class="item">
      <img src="images/view5.jpg" alt="Mountain Photo">
    </div>
  </div>
  <!--carousel inner-->
</div>
<!--carousel outer-->
</div>

Bootstrap Carousel指示灯不会从透明变为固体

1 个答案: