javascript - 实现 twitter bootstrap carousel v2.3.2

Question

我在实施引导轮播时遇到了麻烦。任何人都可以查看以下 html 和 js 并给我有关如何实现幻灯片的说明。.js 未编辑，轮播已安装在 body hero 单元上。我是否实现了轮播 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" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

  </div>

Answer 1

注意：此答案最初适用于Bootstrap 2.3.2（可能不适用于版本 3）

您必须将“项目”类放在所有幻灯片上，并将“活动”类放在第一张幻灯片上。这对我有用。

<div class="carousel">
  <div class="carousel-inner">


<!-- your slide -->

     <div class="hero-unit item active">
                <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>
</div>

就像克里斯托弗说你需要使用这个功能来启动它。

<script type="text/javascript">
$(function(){
   $('.carousel').carousel();
});
</script>

Answer 2

我的理解是

<div class="carousel">

需要是

<div id="myCarousel" class="carousel">

其中 id 是“Arrows”'href 是什么。

Answer 3

Bootstrap Carousel 的文档可在此处获得：http: //twitter.github.com/bootstrap/javascript.html#carousel

我想你需要添加这样的东西来让它运行：

<script type="text/javascript">
$(function(){
   $('.carousel').carousel();
});
</script>

Answer 4

您的示例代码中没有项目。要让它工作，你需要至少有两个项目，在你的 carousel-inner div 中。

1. 创建第二个项目
2. 确保第一项具有活动类别；这开始滚动
3. 裸代码应该是这样的

.

<div class="carousel-inner">
   <div class="active item">…&lt;/div>
   <div class="item">…&lt;/div>
   <div class="item">…&lt;/div>
</div>

Answer 5

这是在 Joomla 3.1.1 中，带有基于 Bootstrap 的 Protostar 模板。我没有让旋转木马自动循环。这对我有用：

使用自定义 html 模块，添加以下代码：（将img scr, alt 文本和标题文本更改为自定义）

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators" style="list-style: none;">
        <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <img src="images/headers/maple.jpg" alt="imagetext 1" />
            <div class="carousel-caption">
                <h4>Exampletext 1</h4>
            </div>
        </div>
        <div class="item">
            <img src="images/headers/raindrops.jpg" alt="imagetext 2" />
            <div class="carousel-caption">
                <h4>Exampletext</h4>
            </div>
        </div>
        <div class="item">
            <img src="images/headers/windows.jpg" alt="imagetext 3" />
            <div class="carousel-caption">
                <h4>Exampletext</h4>
            </div>
        </div>
    </div>

    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹&lt;/a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›&lt;/a>
</div>

<!-- Call Carousel --> 
<script type="text/javascript">
(function($){$('.carousel').carousel({ interval: 5000, pause:'hover'});
})(jQuery);
</script>

模板的 index.php 中的这种调整是为了防止脚本之间发生冲突，它会禁用导致轮播在幻灯片之间打开和关闭的 mootools：

// CSUTOM disable mootools-more.js
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-core.js']);
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-more.js']);