如果使用 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.