How can i make the Javascript work for a Carousel by using bootstrap 4?
Question
I am trying to make a carousel to display pictures for a restaurant's page. I followed a bootstrap tutorial video to code it.
Everythings seems to be working but the carousel refuses to move so i thought it might be a problem with the javascript. However, i cant find whats the problem. I already tried: removing the "5000" property but it did nothing.
I then tried to run the code in the stak snippet tool and i told me that jquery was needed. Which is weird since theres a call for Jquery at the end of the code.
Many thanks for the help !
Bastien
<,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 answers
solution1
0 2020-06-29 10:17:39
You didn't include jquery before (must be) js bootstrap
<,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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I make carousel use 2 row in 1 column using Bootstrap
how can I make a Inline calendar using bootstrap, javascript, jquery
How can i make my carousel work in Angular 8
How can I get my JavaScript carousel to work?
How can I make a text carousel for my site cross browser friendly by using javascript or html?
How can I make an image carousel using HTML5, CSS and Javascript?
How to slide bootstrap carousel manually using JavaScript
How can I make mouse wheel not work using jQuery or JavaScript?
How can i fix bootstrap carousel?
i can't get hover to work in a bootstrap carousel
Related Tags