Javascript不同的轮播具有相同的布局/样式答案

【问题标题】：Javascript different Carousel with same Layout/StyleJavascript不同的轮播具有相同的布局/样式
【发布时间】：2020-06-06 14:42:41
【问题描述】：

这些天我一直对一件事感到困惑，试图谷歌但没有找到任何可以帮助我的情况的东西，不确定是否有人问过这个问题但看起来没有（至少没有那么具体）。

我烦恼的是：我有一个包含 4 个不同（仅在代码中放置 2 个）垂直 div 的部分，我希望每个垂直 div 在点击时触发不同的灯箱/轮播。我的 atm 是下面的代码（没有 CSS，我只有幻灯片和模态/轮播布局的样式）。

问题

我缺乏的是关于如何使用我在 CSS 中设置的相同 Modal/Carousel 布局触发不同轮播的知识。例如，我希望第二张幻灯片触发包含图像 3.jpg 和 4.jpg 的灯箱/轮播。

干杯，祝你有美好的一天。提前致谢。

我还是一个初学者，所以很可能我有一些没有用的无用代码。

HTML

<section class="row" id="gallery" data-toggle="modal" data-target="#exampleModal">
 <div class="slide" alt="First slide" data-toggle="modal" data-target="#exampleModal" data-slide-to="0" >
      <div class="content">
        <h2> Pre-Wedding</h2>
        <p>Bla-bla-bla-bla</p>
      </div>
  </div>
  <div class="slide" alt="Second slide" data-toggle="modal" data-target="#exampleModal"  data-slide-to="0">
      <div class="content">
        <h2> Groom</h2>
        <p>Bla-bla-bla-bla</p>
      </div>
  </div>
</section>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
        <div class="modal-body">
          <div id="carouselExample" class="carousel slide" data-ride="carousel">

              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block " src="1.jpg" alt="First slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block " src="2.jpg" alt="Second slide">
                </div>

                 ...other Images

              </div>
              <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
    </div>
   </div>
  </div>
 </div>
</div>

Javascript

document.getElementById('gallery').classList.add("custom");
document.getElementById('exampleModal').classList.add("custom");

【问题讨论】：

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

了解如何操作。基本上我从这里改变了 CSS

CSS

#exampleModal.custom{
...
}

Javascript


document.getElementById('gallery').classList.add("custom");
document.getElementById('exampleModal').classList.add("custom");

到这里

CSS

#exampleModal.custom, #carouselone.custom{
...
}

Javascript

document.getElementById('gallery').classList.add("custom");
document.getElementById('exampleModal').classList.add("custom");
document.getElementById('carouselone').classList.add("custom");

所以现在通过更改 ID 和数据目标，它会触发具有不同内容（图像）的相同布局。不确定这是否是最有效的方法，但是嘿..它有效

【讨论】：