如果使用 JS 设置引导轮播，则引导轮播不起作用
[英]Bootstrap carousel is not working if set it with JS
问题描述
Bootstrap carousel does not work in example below. 
Bootstrap 轮播在下面的示例中不起作用。 It works when I copy it to .content当我将它复制到.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
You need to call the carousel method manually as you're trying to inject the html code after body onload.当您尝试在正文加载后注入 html 代码时，您需要手动调用 carousel 方法。
Call carousel manually (at the end of Type_Button() function) with:
$('.carousel').carousel()
You can try a bunch of options inside it - check -> https://getbootstrap.com/docs/4.3/components/carousel/#options您可以在其中尝试一堆选项-检查-> 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.