BootStrap 轮播效果

一．轮播效果

1. 一个最简单的经典幻灯片轮播效果，如下：

<div class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/1.png" class="w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="img/2.png" class="w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="img/3.png" class="w-100" alt="">
        </div>
    </div>
</div>

 

2. 给轮播幻灯片两侧加上切换按钮，具体如下：

<div id="carousel" class="carousel slide" data-ride="carousel">
    ...
    <a class="carousel-control-prev" href="#carousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#carousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

 

3. 给轮播幻灯片底部加上切换按钮，具体如下：

<div id="carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    ...
</div>

 

4. 给轮播幻灯片底加上一些字符说明，具体如下：

<div class="carousel-item active">
    <img src="img/1.png" class="w-100" alt="">
    <div class="carousel-caption">
        <h5>Bootstrap4.x</h5>
        <p>这是一款前端样式库，很好用，样式也比较多，大概如此吧...</p>
    </div>
</div>

 

5. 给轮播幻灯片设置渐进式轮播效果，具体如下：

<div class="carousel slide carousel-fade" ></div>

 

6. 通过 JS 控制，来设置轮播的各项数值，代替 data-ride="carousel"；

$('.carousel').carousel({
    //轮播间隔 500 毫秒
    interval : 500,
});

 

7. 通过 JS 控制，使用按钮来控制轮播器的各项操作；

$('.button').click(function () {
    //开始播放
    $('.carousel').carousel('cycle');
    //停止播放
    $('.carousel').carousel('pause');
    //上一张
    $('.carousel').carousel('prve');
    //下一张
    $('.carousel').carousel('next');
    //轮播到指定的图片
    $('.carousel').carousel(2);
});