如何同步/链接2个引导程序5个轮播

问题描述 投票：0回答：3

我在一页上有 2 个 Bootstrap 5 轮播（轮播 a 和轮播 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);
}));
javascript html bootstrap-5
3个回答
0
投票

希望不需要JS。您可以使用每张幻灯片上的 

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>
0
投票

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

确保两个轮播的数据间隔相同

  // 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();
  }
0
投票

这个问题有点老了，其他人可能会像我一样进入此页面寻找解决方案。我通过@jasond1284使用此链接提供的javascript信息找到了解决方案的灵感。他的答案有效，但并不完美。如果 Carousel Indicators 上的属性排列发生变化，解决方案中的 Previous 和 Next 按钮可以工作，但 Carousel Indicators 不起作用。

使其完美工作的技巧是让 Carousel Indicators 点击事件代码能够选择按钮的 data-bs-slide-to 属性。使得该行 

let clickedIndicator = e.target.attributes[1].value;
变成
let clickedIndicator = e.target.attributes['data-bs-slide-to'].value;

其次，当您将鼠标悬停在其中一个轮播上时，它会暂停，而另一个则继续播放。所以需要处理mouseenter和mouseleave_事件。

因此，如果您的 html 和轮播代码如下；

<div class="col-lg-6 d-flex flex-column align-items-center gradient-custom-2">
  <div id="carouselOne" class="carousel slide w-100" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://placehold.co/150x30/000000/FFF" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://placehold.co/150x30/orange/FFF" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://placehold.co/150x30/green/FFF" class="d-block w-100" alt="...">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
  <div id="carouselTwo" class="carousel slide w-60 text-center pt-3" data-bs-ride="carousel">

    <div class="carousel-inner">
      <div class="carousel-item active">
        <h4 class="mb-2">Stay Connected</h4>
        <p>Enjoy fast, reliable internet anywhere you go. Seamless browsing, streaming, and downloads at your fingertips.</p>
      </div>
      <div class="carousel-item">
        <h4 class="mb-2">Easy Setup</h4>
        <p>Get online in minutes with our user-friendly app. Just follow a few simple steps to connect your device.</p>
      </div>
      <div class="carousel-item">
        <h4 class="mb-2">24/7 Support</h4>
        <p>We’ve got your back whenever you need it. Reach out to our support team anytime for quick assistance.</p>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

</div>

工作的 JavaScript 代码将是

// 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');
  const innerAll = document.querySelectorAll('.carousel-inner');

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

  indicatorsAll.forEach( IndicatorBtn => IndicatorBtn.addEventListener("mouseenter", pauseCarousels));
  indicatorsAll.forEach( IndicatorBtn => IndicatorBtn.addEventListener("mouseleave", resumeCarousels));
  innerAll.forEach( CarouselInner => CarouselInner.addEventListener("mouseenter", pauseCarousels));
  innerAll.forEach( CarouselInner => CarouselInner.addEventListener("mouseleave", resumeCarousels));

  // 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['data-bs-slide-to'].value;  
    carouselOne.to(clickedIndicator);
    carouselTwo.to(clickedIndicator);
  }
  
  // Call the Bootstrap 'pause' function for both Carousels to pause when mouse  hovers over any of the carousel page
  function pauseCarousels (e){
    carouselOne.pause();
    carouselTwo.pause();
  }
  
  // Call the Bootstrap 'pause' function for both Carousels to resume when mouse  leaves any of the carousel page
  function resumeCarousels (e){
    carouselOne.cycle();
    carouselTwo.cycle();
  }

  // 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();
  }

已在 CodePen

上创建了工作示例
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.