如何同步/链接两个Bootstrap 5走马灯？

Question

如何同步/链接两个Bootstrap 5走马灯？

3

我在一个页面上有两个Bootstrap 5轮播（carousel-a和carousel-b），我希望它们可以相互同步/链接。我认为这可以用js来实现，但我对js不太熟悉。 carousel-a如下所示（carousel-b相同）：

<div id="carousel-a" class="carousel slide carousel-sync" data-bs-ride="carousel" data-bs-pause="false" data-bs-interval="50000000">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carousel-a" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carousel-a" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carousel-a" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="assets/img/placeholder-1200x500.png" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="assets/img/placeholder-1200x500.png" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="assets/img/placeholder-1200x500.png" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carousel-a" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carousel-a" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

目前我有这个问题，但是我似乎无法选择我的旋转木马，而且我不知道为什么。

var carouselA = document.getElementById('carousel-a');
var carouselB = document.getElementById('carousel-b');

$(carouselA.on('slide.bs.carousel', function (event) {
    carouselB.carousel(event.to);
}));

- Steven

嗨，Steven，欢迎来到Stack Overflow。当你说旋转木马应该同步/链接时，是指它们应该同时滑动，还是例如相互之间滑动一小段时间后再滑动。或者是你想要将某种内容链接到两个旋转木马上？如果可能的话，请稍作澄清。谢谢。 - Cutey from Cute Code

嗨，@CuteCodeRob，我希望它们同时滑动。它们放置在彼此上方，carousel-a（顶部）将具有控件和指示器，而底部的carousel-b则没有控件或指示器（至少不可见）。因此，例如，如果carousel-a移动一个幻灯片，carousel-b也需要移动一个幻灯片。 - Steven

1

你试图使用jQuery方法，但实际上并没有涉及到jQuery。你需要使用纯JavaScript，并在此答案中复制使用jQuery的操作。 - isherwood

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jasond1284 · Answer 1

这对我有用 - 全部源自https://getbootstrap.com/docs/5.0/components/carousel/

确保两个轮播的 data-bs-interval 相同

  // Grab your carousels
  const myCarouselOne = document.querySelector('#carouselOne')
  const myCarouselTwo = document.querySelector('#carouselTwo')

  // Get either the existing Bootstrap Carousel instance or create a new one
  const carouselOne = bootstrap.Carousel.getOrCreateInstance(myCarouselOne);
  const carouselTwo = bootstrap.Carousel.getOrCreateInstance(myCarouselTwo);

  // Grab your radio indicators, the previous and next buttons/arrows
  const indicatorsAll = document.querySelectorAll('.carousel-indicators');
  const prevCarouselBtn = document.querySelector('.carousel-control-prev');
  const nextCarouselBtn = document.querySelector('.carousel-control-next');

  // Add event listeners to your indicators, previous and next buttons/arrows
  indicatorsAll.forEach( IndicatorBtn => IndicatorBtn.addEventListener("click", goToIndicatorCarousels));
  prevCarouselBtn.addEventListener('click', prevCarousels);
  nextCarouselBtn.addEventListener('click', nextCarousels);

  // Call the Bootstrap 'to' function for both Carousels to go to the indicator page that was clicked
  function goToIndicatorCarousels (e){
    let clickedIndicator = e.target.attributes[1].value;
    carouselOne.to(clickedIndicator);
    carouselTwo.to(clickedIndicator);
  }

  // Call the Bootstrap 'prev' function for both Carousels to go to the previous page
  function prevCarousels(){
    carouselOne.prev();
    carouselTwo.prev();
  }

  // Call the Bootstrap 'next' function for both Carousels to go to the next page
  function nextCarousels(){
    carouselOne.next();
    carouselTwo.next();
  }

- Cutey from Cute Code · Answer 2

希望不需要使用JavaScript。您可以使用data-bs-interval="8000"来控制每个幻灯片的时间，其中8000是下一张幻灯片出现前的秒数。

例如，所有幻灯片都可以像上面那样设置为8秒，或者您的最后一张幻灯片是联系信息，您希望它显示12秒左右的时间。

每个幻灯片看起来都像这样。

<div class="carousel-item active data-bs-interval="8000">
   <img src="assets/img/....." class="d-block w-100" alt="...">
</div>