Bootstrap Carousel不工作和初始化

时间：2018-05-07 12:45:47

标签： javascript jquery html css twitter-bootstrap

请有人可以分析下面的代码并告诉我为什么旋转木马不工作。即使我点击下一个或perv glyphicon，图片也完全没有滑动。我希望它是自动的。它不适用于任何浏览器。我从一个网站上获取了这个代码，它在那里完美地工作但不在我的笔记本电脑上。我无法理解问题在哪里

＆＃13;
＆＃13; 
 .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;
    }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

请尝试以下代码：

＆＃13;
＆＃13; 
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你可以试试下面的代码

<!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>

相关问题
最新问题