相关疑难解决方法(0)

我在实现bootstrap轮播时遇到了麻烦.任何人都可以看看下面的html和js,并给我如何实现幻灯片的说明..js尚未编辑,旋转木马安装在正文英雄单元上.我是否实施了旋转木马api？如何在.js文件中定义我正在使用的轮播？谢谢.

<div class="carousel">

  <!-- Carousel items -->
  <div class="carousel-inner">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>  

  </div>      

 <!-- Carousel nav -->

  <a class="carousel-control left" href="#myCarousel" …

我正在使用轮播来展示一些最受好评的产品，轮播可以工作，但我无法正常工作，似乎问题出在“活跃”类别上。每张“幻灯片”显示 4 种产品。

这是我的代码

<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
{% for p in prod %}
<div class="item {% if forloop.first %} active {% endif %}"> // here is the problem
   <div class="row">
     <div class="col-sm-3">
       <h1>{{p.name}}</h1>
     </div>
   </div>
</div>
{% endfor %}
</div>
</div>

如果我不使用 forloop.first，则轮播不会滑动。通过这个 forloop.first，每张幻灯片仅显示一个项目，而不是 4 个项目。

检查器中的输出是：

<div class="carousel-inner">
<div class="item active"> 
   <div class="row">
     <div class="col-sm-3"> // Here I expect 4 columns and I get only 1
     </div>
   </div>
</div>
<div class="item">
   <div class="row">
     <div …