Bootstrap Carousel无法正常工作和初始化

Question

Please somebody can analyze the code below and tell me why is the carousel not working. 请有人可以分析以下代码，并告诉我为什么轮播无法正常工作。 The pictures are not at all sliding even if I click on next or perv glyphicon. 即使单击next或perv glyphicon，图片也不会滑动。 I want it to be automatic. 我希望它是自动的。 It working in none of the browsers. 它不能在任何浏览器中运行。 I have taken this code from a site and its perfectly working there but not on my laptop. 我从一个站点上获取了此代码，并且该代码在该站点上可以正常运行，但不在我的笔记本电脑上。 I am unable to understand where is the problem 我不明白问题出在哪里

  .colht{ height:200px; border: 5px solid red; } .colht1{ height:100px; border: 5px solid yellow; } .navbar-custom { background-color:#ffffff; color:#ffffff; border-radius:0; padding:10px; }

 <!DOCTYPE html> <html lang="en"> <head> <title> Power Me Up </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script type="text/javscript" src="jquery-1.11.3.min.js"></script> <script type="text/javscript" src="bootstrap/js/bootstrap.min.js"></script> <style type="text/css"> </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Power Me Up</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active "><a href="#">Menu 1</a></li> <li class=""> <a class="" href="#">Menu 2</a> </li> <li class=""><a href="#">Menu 3</a></li> <li class=""><a href="#">Menu 4</a></li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-12"> <div id="carousel-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-generic" data-slide-to="1" ></li> <li data-target="#carousel-generic" data-slide-to="2" ></li> <li data-target="#carousel-generic" data-slide-to="3" ></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="images/1.jpg" alt="Menu 1" style="width:100%;"> <div class="carousel-caption"> <h3> Menu 1 </h3> </div> </div> <div class="item"> <img src="images/2.jpg" alt="Menu 2" style="width:100%;"> <div class="carousel-caption"> <h3> Menu 2 </h3> </div> </div> <div class="item"> <img src="images/3.jpg" alt="Menu 3" style="width:100%;"> <div class="carousel-caption"> <h3> Menu 3 </h3> </div> </div> <div class="item"> <img src="images/4.jpg" alt="Menu 4" style="width:100%;"> <div class="carousel-caption"> <h3> Menu 4 </h3> </div> </div> </div> <a class = "left carousel-control" href="#carousel-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class = "right carousel-control" href="#carousel-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> </body> </html>

Answer 1

Try this code below: 请尝试以下代码：

 <!-- By abinthaha --> <html lang="en" class=""> <head> <link rel="canonical" href="https://codepen.io/abinthaha/pen/RyjLKa"> <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css"> <style class="cp-pen-styles"></style> </head> <body> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class=""></li> <li data-target="#demo" data-slide-to="1" class=""></li> <li data-target="#demo" data-slide-to="2" class="active"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item"> <img src="https://news.marvel.com/wp-content/uploads/2017/12/tt-m.jpg" alt="Los Angeles"> </div> <div class="carousel-item"> <img src="https://cdn.movieweb.com/img.news.tops/NEx6Czlz5SCWBy_1_b/Marvel-Movies-Release-Slate-2021-2022-Mcu.jpg" alt="Chicago"> </div> <div class="carousel-item active"> <img src="https://cdn.images.express.co.uk/img/dynamic/36/590x/Avengers-Iron-Man-was-almost-played-by-another-major-star-936289.jpg" alt="New York"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> </body> </html>

Answer 2

can you please try below code 你可以尝试下面的代码吗

 <!DOCTYPE html> <html lang="en"> <head> <title> Power Me Up </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" media="screen"> <style type="text/css"> .colht{ height:200px; border: 5px solid red; } .colht1{ height:100px; border: 5px solid yellow; } .navbar-custom { background-color:#ffffff; color:#ffffff; border-radius:0; padding:10px; } </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Power Me Up</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active "><a href="#">Menu 1</a></li> <li class=""> <a class="" href="#">Menu 2</a> </li> <li class=""><a href="#">Menu 3</a></li> <li class=""><a href="#">Menu 4</a></li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-12"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="http://www.rodzinne-wakacje.pl/wp-content/uploads/2017/05/maldives-1993704_960_720-696x391.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" 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://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://v4-alpha.getbootstrap.com/assets/js/vendor/tether.min.js"></script> <script src="https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script> </body> </html>

Bootstrap Carousel无法正常工作和初始化

问题描述

2 个解决方案

解决方案1
1 2018-05-07 13:25:13

解决方案2
0 2018-05-07 13:17:45

Bootstrap Carousel无法正常工作和初始化

问题描述

2 个解决方案

解决方案1 1 2018-05-07 13:25:13

解决方案2 0 2018-05-07 13:17:45

解决方案1
1 2018-05-07 13:25:13

解决方案2
0 2018-05-07 13:17:45