logo标签列表

实现 Twitter Bootstrap 轮播 v2.3.2

javascripthtmltwitter-bootstrapcarouseltwitter-bootstrap-2
6

我在实现bootstrap轮播功能时遇到了问题。有没有人可以查看以下html和js代码，并给我提供如何实现幻灯片的说明。.js文件未经编辑，轮播安装在body hero unit上。我需要实现轮播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>
我认为Bootstrap通过一个$().carousel()函数调用来钩入类。 - circusdei
5个回答
8

注意：本回答最初是针对Bootstrap 2.3.2编写的（可能与版本3不兼容）

您需要在所有幻灯片上放置"class"item"，并在第一张幻灯片上放置"class"active"。这对我有用。

<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>

就像Christopher所说，您需要使用此函数来启动它。

<script type="text/javascript">
$(function(){
   $('.carousel').carousel();
});
</script>
1
我在第一张幻灯片上没有激活，这让我感到非常困惑。 - Randy L
6
我的理解是：
<div class="carousel">

需要的是

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

其中id是“Arrows”链接的href。

3
1

您的示例代码中没有任何项。

要使其正常工作，您需要在carousel-inner div中至少有两个项。

  1. 创建第二个项
  2. 确保第一个项具有活动类；这将启动滚动效果
  3. 裸代码应如下所示

.

<div class="carousel-inner">
   <div class="active item">…</div>
   <div class="item">…</div>
   <div class="item">…</div>
</div>
0

这是基于Bootstrap的Protostar模板在Joomla 3.1.1中使用。 我无法使轮播自动循环。这个方法对我有效：

使用自定义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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</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']);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接