Bootstrap 3.1.1 Carousel无效

时间:2018-04-02 16:29:33

标签: html css twitter-bootstrap carousel

Xcart,PHP5.6,Bootstrap 3.1.1

我的目标是制作一个一次显示3个项目的旋转木马,并循环显示总共5个项目。

我确保我的图书馆被调用,并且他们应该是他们应该去的地方,但旋转木马永远不会发起。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

<style type="text/css">
       .container{
         margin: 0 auto;
       } 
</style>

<div class="container">
  <div id="this-carousel-id" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://i.stack.imgur.com/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.stack.imgur.com/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.stack.imgur.com/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.stack.imgur.com/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.stack.imgur.com/ihiQ2.png" />
      </div>
   </div>
   <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;<    /a>     
   <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;    </a>  
  </div>
</div>

$(document).ready(function(){
  $('.carousel').carousel({
           interval: 4000
  });
});

我尝试使用文档中的示例代码来获取某些内容以显示类似轮播的行为,但它们正在堆叠:

enter image description here enter image description here enter image description here 我感觉很糟糕,因为这个问题已被反复询问,我已经按照答案但我被卡住了。

2 个答案:

答案 0 :(得分:1)

  

使用tbl <- c( SVM.Ngram = "approach1", LG.WE = "approach2", SVM.WE = "approach3" ) ggplot(data=datatest, aes(x=Percentage,y=Accuracy,group=interaction(Classifiers, Feature), color=interaction(Classifiers, Feature))) + geom_line() + labs(color = "Approaches") + facet_grid(OS ~ Dataset, labeller = labeller(tbl) ) 代替https://...

http://...

答案 1 :(得分:1)

在您要显示的代码段中,您必须将您的javascript放入<script>...</script>代码,请确保您的广告正在使用https而不是http

您也忘了添加bootstrap.min.css

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">