Question

我正在使用Bootstrap 4来创建2个并排图像轮播，并在其下面包含一个包含控制器按钮的外部div。目标是使一个旋转木马包含“之前”照片，而另一个包含“后”照片，并且具有一组控制器按钮来控制两个旋转木马的幻灯片。因此，如果用户在控制器div上单击“ 04”（例如），则两个轮播会同时滑到该特定幻灯片上。

我已经读到Bootstrap允许您输入多个数据目标，但是由于某种原因，它对我不起作用。仅定位到一个轮播时，控制器按钮会按预期工作，但是每当我尝试添加第二个轮播ID时，它就会停止工作。这是我一直尝试使用的方法：data-target =“＃first-carousel，＃second-carousel”

示例代码：

<div class="interior-column">
        <div id="first-carousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item gallery-slide gallery-slide-before-one active"></div>
            <div class="carousel-item gallery-slide gallery-slide-before-two"></div>
            <div class="carousel-item gallery-slide gallery-slide-before-three"></div>
          </div>
        </div>
      </div>

      <div class="interior-column">
        <div id="second-carousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item gallery-slide gallery-slide-after-one active"></div>
            <div class="carousel-item gallery-slide gallery-slide-after-two"></div>
            <div class="carousel-item gallery-slide gallery-slide-after-three"></div>
          </div>
        </div>
      </div>

      <div class="row">
        <div id="external-controls" class="col-auto " role="group" aria-label="External carousel buttons">
          <button class="btn btn-primary" data-target="#first-carousel,#second-carousel" data-slide-to="0" type="button">01</button>
          <button class="btn btn-primary" data-target="#first-carousel,#second-carousel" data-slide-to="1" type="button">02</button>
          <button class="btn btn-primary" data-target="#first-carousel,#second-carousel" data-slide-to="2" type="button">03</button>
        </div>
      </div>

任何有关如何使我的控制器按钮同时对准两个转盘幻灯片的建议，将不胜感激。

谢谢！

Bootstrap 4轮播按钮的多个数据目标

0 个答案: