Javascript不同的Carousel有相同的LayoutStyle。

Question

这几天我一直被一件事困惑着，试着去google，但没有找到任何对我的情况有帮助的东西，不知道是否有人问过这个问题，但看起来好像没有（至少没有那么具体）。

我的困扰是：我有一个有4个不同的（在代码中只放了2个）垂直divs的部分，我想让每个divs在点击时触发一个不同的LightboxCarousel.我现在有的是下面的代码（没有CSS，我只有Slides和ModalCarousel布局的样式）。

遇到的问题 我缺乏的是如何用CSS中相同的ModalCarousel布局来触发不同的转盘的知识。例如，我想让第二个Slide触发一个包含图片3.jpg和4.jpg的LightboxCarousel。

干杯，并有一个美好的一天。先谢谢你了。

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

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");

Answer 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和数据目标，它触发相同的布局，不同的内容（图像）.不知道是否是最有效的方式，但嘿...它的工作。