如果使用 JS 设置引导轮播，则引导轮播不起作用
[英]Bootstrap carousel is not working if set it with JS
问题描述
Bootstrap 轮播在下面的示例中不起作用。 当我将它复制到.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>
1 个解决方案
解决方案1
1 已采纳 2020-12-29 10:45:03
当您尝试在正文加载后注入 html 代码时，您需要手动调用 carousel 方法。
手动调用 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>
MEAN.JS和角度自举旋转木马不工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.