Bootstrap 5 Carousel 在页面加载后不会自动播放

问题描述 投票:0回答:1
dom bootstrap-5 carousel pageload autoplay
1个回答
0
投票

根据 docs,具有

data-bs
属性的 Carousel 组件会在页面加载时自动初始化,因此稍后添加它们将不起作用。

因此,您可以使用 JavaScript 手动实例化它。

您似乎使用的是 jQuery,因此 BS 组件自动可用,因此您可以通过将

cycle
传递给
.carousel
方法来实例化轮播:

 $('#previous-div').after($(carouselHTML).carousel('cycle'));

演示:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>


  <div id="previous-div"></div>


  <script>
    $(document).ready(function() {

      const carouselHTML = `
      <div id="carouselExampleSlidesOnly" class="carousel slide">
      <div class="carousel-inner">
      <div class="carousel-item active">
      <img src="https://placehold.co/300x200" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
      <img src="https://placehold.co/300x200" class="d-block w-100" alt="...">
      </div>
      </div>
      </div>
  `;


      $('#previous-div').delay(2000).after($(carouselHTML).carousel('cycle'));



    });
  </script>

</body>

</html>

© www.soinside.com 2019 - 2024. All rights reserved.