如果使用 JS 设置引导轮播，则引导轮播不起作用答案

【问题标题】：Bootstrap carousel is not working if set it with JS如果使用 JS 设置引导轮播，则引导轮播不起作用
【发布时间】：2020-12-29 10:28:04
【问题描述】：

引导轮播在下面的示例中不起作用。当我将它复制到.content时它可以工作

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script>
    function Type_Button() {
      $("div#content").html('<div id="Doodle" class="carousel slide" data-ride="carousel" data-interval="500"><div class="carousel-inner"><div class="item active" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-loteria-2019-6753651837108772.2-2xa.gif"></div><div class="item" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-halloween-2016-6753651837108773-2xa.gif"></div></div></div>');
      }
    window.onload = Type_Button;
  </script>
</head>
<body>
  <div id="content"></div>
</body>

【问题讨论】：

@T.J.Crowder 它可用。 getbootstrap.com/docs/3.4/examples/carousel
谢谢@Tethys0 - 它被列为here 而不是where I was looking（旧的Bootstrap 文档组织得非常奇怪......）。
Metha - 我的问题仍然存在 - 为什么要使用如此过时的 Bootstrap 版本？

标签： javascript jquery twitter-bootstrap

【解决方案1】：

在正文加载后尝试注入 html 代码时，您需要手动调用 carousel 方法。

手动调用轮播（在 Type_Button() 函数的末尾）：

$('.carousel').carousel()

你可以在里面尝试一堆选项 - 检查 -> https://getbootstrap.com/docs/4.3/components/carousel/#options

<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script>
      function Type_Button() {
        $("div#content").html('<div id="Doodle" class="carousel slide" data-ride="carousel" data-interval="500"><div class="carousel-inner"><div class="item active" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-loteria-2019-6753651837108772.2-2xa.gif"></div><div class="item" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-halloween-2016-6753651837108773-2xa.gif"></div></div></div>');

        $('.carousel').carousel();
      }
      window.onload = Type_Button;

    </script>
  </head>

  <body>
    <div id="content">

    </div>
  </body>

</html>

【讨论】：