2017-04-22 41 views
1

我是新手,我刚开始学习引导。我现在发现了一个问题,我试图解决它大约一个小时。我的旋转木马画廊不工作。它一次显示所有图片。Bootstrap - 传送带不起作用。显示所有图片但没有动画

这是我的代码: `

<div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div id="myowncarousel" class="carousel slide"> 
         <ol class="carousel-indicators"> 
          <li data-target="#myowncarousel" data-slide-to="0" class="active"></li> 
          <li data-target="#myowncarousel" data-slide-to="1"></li> 
          <li data-target="#myowncarousel" data-slide-to="2"></li> 
         </ol> 
         <div class="carousel-inner"> 
          <div class="item active"> 
          <img src="img/banner_1.png" alt=""> 
          </div> 
          <div class="item"> 
          <img src="img/banner_2.png" alt=""> 
          </div> 
          <div class="item"> 
          <img src="img/banner_3.png" alt=""> 
          </div> 
         </div> 
         <a class="left carousel-control" href="#myowncarousel" data-slide="prev"> 
         <span class="icon-prev"></span></a> 
         <a class="right carousel-control" href="#myowncarousel" data-slide="next"> 
         <span class="icon-next"></span></a> 
        </div> 
       </div> 
      </div>  
     </div> 

` 我会是你的帮助非常感激!

编辑:

<meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <meta http-equiv="Refresh" content="30" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"/> 
     <link href="css/style.css" type="text/css" rel="stylesheet"/> 
     </head> 
     <body> 
... 

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    </body> 

这是如何我加载引导文件。我希望没关系。

+0

您是否验证过bootstrap正在您的网站上运行?如果是这样,你应该检查项目上的元素,看看是否有一个样式覆盖css规则'.carousel-inner> .item {display:none;}'。另外,我不认为js会触发,除非你的元素上有'class =“carousel slide”' –

+0

你的代码很好,如果你正确的加载了js和css文件,它应该工作,所以你可能没有正确加载东西 – jakob

回答

0

你在你的进口使用Bootstrap v4,但Bootstrap 3

所以你的HTML代码,来解决这个问题,你应该:

  • 添加引导3到您的进口
  • 更改您的代码以引导4

jsfiddle

+0

哦......非常感谢你。我不知道代码引导程序3和4之间是否有区别。我现在用你的帮助修复了它。再次感谢你! – Sebastian