Bootstrap 轮播

2022-09-20 13:40:13

【Bootstrap 轮播】

1、要设置一个轮播界面，需要注意以下几点：

　　1）根div 必须为 class="carousel slide"

　　2）根div下含有三块子div

　　　　a）<ol class="carousel-indicators">

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

　　　　c）<a class="carousel-control left"> 以及 <a class="carousel-control right"

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

    <!-- 轮播（Carousel）指标 -->

    <ol class="carousel-indicators">

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

    </ol>

    <!-- 轮播（Carousel）项目 -->

    <div class="carousel-inner">

        <div class="item active">

            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">

        </div>

        <div class="item">

            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">

        </div>

        <div class="item">

            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">

        </div>

    </div>

    <!-- 轮播（Carousel）导航 -->

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

2、<div class="carousel-caption">可以添加标题

3、

通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
- 属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
- 使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
- data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：
```
$('.carousel').carousel()
```

参考：http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

码农公寓

相关文章