Bootstrap传送带不能滑动 [英] Bootstrap carousel not sliding

问题描述

我一直在尝试使用Bootstrap Carousel并在某种程度上取得了成功。我也可以点击并更改图像。但我有一个问题。它只是不滑！

html：

 < div id =my_carouselclass =carousel slide> 
 
 
< li data-target =#my_carouseldata-slide-to =0class =active>< / li> 
< li data-target =#my_carouseldata-slide-to =1>< / li> 
< li data-target =#my_carouseldata-slide-to =2>< / li> 
< / ol> 
 
< div class =carousel-inner i> 
 
< div class =item active> 
< img src =images / f3.jpgalt =i1class =img-responsive> 
< / div> 
 
< div class =item> 
< img src =images / f2.jpgalt =i2class =img-responsive> 
< / div> 
 
< div class =item> 
< img src =images / f1.jpgalt =i3class =img-responsive> 
< / div> 
 
< / div> 
 
< a class =carousel-control lefthref =＃my_carouseldata-slide =prev> 
< span class =icon-prev left>< / span> 
< / a> 
 
 < span class =icon-next right>< / span> 
< / a> 
< / div> 
  

编辑：

jquery：

 < script language = JavaScripttype =text / javascript> 
 $（document）.ready（function（）{
 $（'。carousel'）。carousel（{
 interval：3000 
}）
}）; 
< / script> 
< script language =JavaScripttype =text / javascriptsrc =scripts / jquery.js>< / script> 
< script language =JavaScripttype =text / javascriptsrc =scripts / bootstrap.min.js>< / script> 
  

解决方案

您是否包含此脚本：

 < script language =JavaScripttype =text / javascript> 
 $（document）.ready（function（）{
 $（'。carousel'）。carousel（{
 interval：2000 
}）
}）; 
< / script> 
  

编辑
<即使它不起作用，请在调用jquery之前检查是否调用了上述脚本。所以，它应该是这样的：

 <！ - 首先调用jquery  - > 
< script language =JavaScripttype =text / javascriptsrc =scripts / jquery.js>< / script> 
< script language =JavaScripttype =text / javascriptsrc =scripts / bootstrap.min.js>< / script> 
<！ -  Carousel  - > 
< script language =JavaScripttype =text / javascript> 
 $（document）.ready（function（）{
 $（'。carousel'）。carousel（{
 interval：3000 
}）
}）; 
< / script> 
  

I have been trying to use the Bootstrap Carousel and have been successful to some extent. I can click and change the images too. But I have got one problem. Its just not sliding! Where am I doing wrong?

html:

<div id="my_carousel" class="carousel slide">

  <ol class="carousel-indicators">
    <li data-target = "#my_carousel" data-slide-to = "0" class="active"></li>
    <li data-target = "#my_carousel" data-slide-to = "1"></li>
    <li data-target = "#my_carousel" data-slide-to = "2"></li>
  </ol>

  <div class="carousel-inner i">

    <div class="item active">
      <img src="images/f3.jpg" alt = "i1" class="img-responsive">
    </div>

    <div class="item">
      <img src="images/f2.jpg" alt = "i2" class="img-responsive">
    </div>

    <div class="item">
      <img src="images/f1.jpg" alt = "i3" class="img-responsive">
    </div>

  </div>

  <a class="carousel-control left" href="#my_carousel" data-slide = "prev">
    <span class="icon-prev left"></span>
  </a>

  <a class="carousel-control right" href="#my_carousel" data-slide = "next">
    <span class="icon-next right"></span>
  </a>
</div>

EDIT:

jquery:

<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 3000
    })
  });    
</script>
<script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>

解决方案

Did you include this script:

<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 2000
    })
  });    
</script>

Edit

And even it its not working, please check whether you are calling the above script before calling the jquery. So, it should be like this:

<!-- Calling jquery first -->
<script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>
  <!-- Carousel -->
<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 3000
    })
  });    
</script>  

这篇关于Bootstrap传送带不能滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！