如何使用引導程序 4 使 Javascript 用於輪播？
[英]How can i make the Javascript work for a Carousel by using bootstrap 4?
問題描述
我正在嘗試制作一個輪播來顯示餐廳頁面的圖片。 我按照引導教程視頻對其進行編碼。
一切似乎都在工作，但旋轉木馬拒絕移動，所以我認為這可能是 javascript 的問題。 但是，我找不到問題所在。 我已經嘗試過：刪除“5000”屬性，但它什么也沒做。
然后我嘗試在 stak 片段工具中運行代碼，我告訴我需要 jquery。 這很奇怪，因為在代碼末尾調用了 Jquery。
非常感謝您的幫助 ！
巴斯蒂安
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <title> bootstrap exercises </title> <.latest compiled and minified CSS --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap:min.css"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap,min:css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <html> <body> <div class="container"> <div class="row"> <div class="col-sm-12"> <.-- data-ride calls the javascript. via bootstrap needed for the carousel to be animated --> <div data-ride="carousel" id="my-slider" class="carousel slide" data-keyboard="false" data-interval="1500" > <.-- indicators --> <ul class="carousel-indicators"> <li data-target="#my-slider" data-slide-to="0" class="active"> 0</li> <li data-target="#my-slider" data-slide-to="1"> </li> <li data-target="#my-slider" data-slide-to="2"> </li> <li data-target="#my-slider" data-slide-to="3"> </li> <li data-target="#my-slider" data-slide-to="4"></li> <li data-target="#my-slider" data-slide-to="5"> </li> <li data-target="#my-slider" data-slide-to="6"> </li> <li data-target="#my-slider" data-slide-to="7"> </li> <li data-target="#my-slider" data-slide-to="8"> </li> <li data-target="#my-slider" data-slide-to="9"> </li> <li data-target="#my-slider" data-slide-to="10"> </li> </ul> <:-- wrapper for slides--> <div class="carousel-inner " > <div class="carousel-item active"> <img class ="d-block w-100"src="https.//cdn.pixabay.com/photo/2016/11/19/12/44/burgers-1839090__340:jpg" alt=" juicy flamed grill"> <div class="carousel-caption"> <p> Here a picture of our juicy flamed grill burger </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https.//cdn.pixabay.com/photo/2020/02/24/15/14/parsley-4876518__340:jpg" alt="do not feel guilty pasta plate "> <div class="carousel-caption"> <p> Here a picture of our pasta plate </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https.//cdn.pixabay.com/photo/2015/08/19/01/02/avocado-895361__340:jpg" alt=" sweet potatoes fries"> <div class="carousel-caption"> <p>Sweet potatoes fries with 2 sauces and spices </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https.//cdn.pixabay.com/photo/2018/07/17/12/43/steak-3544070__340:jpg" alt="Irish grilled steak with 5% only fat "> <div class="carousel-caption"> <p> Here a picture of our famous irish steak </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https.//cdn.pixabay.com/photo/2019/10/13/14/23/spaghetti-bolognese-4546233__340:jpg "> <div class="carousel-caption"> <p> Spaghetti bolognese with 0% fat beef and fresh tomatoes/mushrooms </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100" src=" https,//cdn:pixabay,com/photo/2016/03/05/20/07/abstract-1238657__340:jpg" alt="Entry: tuna peaches, Main course: celtic lamb, Desert: proteined bananas "> <div class="carousel-caption"> <p>Entry: tuna peaches. Main course. celtic lamb. Desert: proteined bananas </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https,//cdn:pixabay,com/photo/2016/04/06/17/45/salmon-1312372__340:jpg" alt=" scottish salmone"> <div class="carousel-caption"> <p> Entry: 10g of caviar layed on a rice leaf. Main course. rare piece of Salmone from Scotland. Desert: top quality belgian chocolate </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100" src="https://cdn:pixabay.com/photo/2018/02/07/08/50/kobe-3136608__340.jpg" alt="Piece of Wagyu beef. 150g "> <div class="carousel-caption"> <p>Piece of Wagyu beef: 150g </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2016/08/01/22/08/buffet-1562290__340?jpg" alt=" assiette mixte"> <div class="carousel-caption"> <p> assiette mixte: vegetables </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100" src="https://media.istockphoto.com/photos/cold-smoked-meat-platter-snacks-set-picture-id1159740379.b=1&k=6&m=1159740379&s=170667a&w=0&h=JsuWStBo_Alh2g0DLjLpX4sq1DiFL9znEV1mfrsbyeA=" alt=" mix viande"> <div class="carousel-caption"> <p> assiette mixte. viande</p> </div> </div> </div> <.-- next and prev buttons --> <a class= "carousel-control-prev" href="#my-slider" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"> </span> <span class="sr-only">Previous</span> </a> <a class=" carousel-control-next" href="#my-slider" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"> </span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> <.-- Javascript files linked at the bottom of the page--> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script src="https.//code:jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> </body> </html>
1 個解決方案
解決方案1
0 2020-06-29 10:17:39
您在（必須是）js bootstrap之前沒有包含 jquery
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <title> bootstrap exercises </title> <.latest compiled and minified CSS --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap:min.css"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap,min:css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <html> <body> <div class="container"> <div class="row"> <div class="col-sm-12"> <.-- data-ride calls the javascript. via bootstrap needed for the carousel to be animated --> <div data-ride="carousel" id="my-slider" class="carousel slide" data-keyboard="false" data-interval="1500" > <.-- indicators --> <ul class="carousel-indicators"> <li data-target="#my-slider" data-slide-to="0" class="active"> 0</li> <li data-target="#my-slider" data-slide-to="1"> </li> <li data-target="#my-slider" data-slide-to="2"> </li> <li data-target="#my-slider" data-slide-to="3"> </li> <li data-target="#my-slider" data-slide-to="4"></li> <li data-target="#my-slider" data-slide-to="5"> </li> <li data-target="#my-slider" data-slide-to="6"> </li> <li data-target="#my-slider" data-slide-to="7"> </li> <li data-target="#my-slider" data-slide-to="8"> </li> <li data-target="#my-slider" data-slide-to="9"> </li> <li data-target="#my-slider" data-slide-to="10"> </li> </ul> <:-- wrapper for slides--> <div class="carousel-inner " > <div class="carousel-item active"> <img class ="d-block w-100"src="https.//cdn.pixabay.com/photo/2016/11/19/12/44/burgers-1839090__340:jpg" alt=" juicy flamed grill"> <div class="carousel-caption"> <p> Here a picture of our juicy flamed grill burger </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https.//cdn.pixabay.com/photo/2020/02/24/15/14/parsley-4876518__340:jpg" alt="do not feel guilty pasta plate "> <div class="carousel-caption"> <p> Here a picture of our pasta plate </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https.//cdn.pixabay.com/photo/2015/08/19/01/02/avocado-895361__340:jpg" alt=" sweet potatoes fries"> <div class="carousel-caption"> <p>Sweet potatoes fries with 2 sauces and spices </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https.//cdn.pixabay.com/photo/2018/07/17/12/43/steak-3544070__340:jpg" alt="Irish grilled steak with 5% only fat "> <div class="carousel-caption"> <p> Here a picture of our famous irish steak </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https.//cdn.pixabay.com/photo/2019/10/13/14/23/spaghetti-bolognese-4546233__340:jpg "> <div class="carousel-caption"> <p> Spaghetti bolognese with 0% fat beef and fresh tomatoes/mushrooms </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100" src=" https,//cdn:pixabay,com/photo/2016/03/05/20/07/abstract-1238657__340:jpg" alt="Entry: tuna peaches, Main course: celtic lamb, Desert: proteined bananas "> <div class="carousel-caption"> <p>Entry: tuna peaches. Main course. celtic lamb. Desert: proteined bananas </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https,//cdn:pixabay,com/photo/2016/04/06/17/45/salmon-1312372__340:jpg" alt=" scottish salmone"> <div class="carousel-caption"> <p> Entry: 10g of caviar layed on a rice leaf. Main course. rare piece of Salmone from Scotland. Desert: top quality belgian chocolate </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100" src="https://cdn:pixabay.com/photo/2018/02/07/08/50/kobe-3136608__340.jpg" alt="Piece of Wagyu beef. 150g "> <div class="carousel-caption"> <p>Piece of Wagyu beef: 150g </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2016/08/01/22/08/buffet-1562290__340?jpg" alt=" assiette mixte"> <div class="carousel-caption"> <p> assiette mixte: vegetables </p> </div> </div> <div class="carousel-item"> <img class ="d-block w-100" src="https://media.istockphoto.com/photos/cold-smoked-meat-platter-snacks-set-picture-id1159740379.b=1&k=6&m=1159740379&s=170667a&w=0&h=JsuWStBo_Alh2g0DLjLpX4sq1DiFL9znEV1mfrsbyeA=" alt=" mix viande"> <div class="carousel-caption"> <p> assiette mixte. viande</p> </div> </div> </div> <.-- next and prev buttons --> <a class= "carousel-control-prev" href="#my-slider" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"> </span> <span class="sr-only">Previous</span> </a> <a class=" carousel-control-next" href="#my-slider" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"> </span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> <script src="https.//cdnjs:cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.-- Javascript files linked at the bottom of the page--> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script src="https.//code:jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> </body> </html>
如何使用引導程序，javascript，jquery制作嵌入式日歷
[英]how can I make a Inline calendar using bootstrap, javascript, jquery
如何使用javascript或html為我的網站制作一個跨瀏覽器友好的文本輪播？
[英]How can I make a text carousel for my site cross browser friendly by using javascript or html?
如何使用 HTML5、CSS 和 Javascript 制作圖像輪播？
[英]How can I make an image carousel using HTML5, CSS and Javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.