前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >bootstrap3 轮播图片 传送带 carousel

bootstrap3 轮播图片 传送带 carousel

作者头像
用户5760343
发布2019-10-14 17:43:46
1.6K0
发布2019-10-14 17:43:46
举报
文章被收录于专栏:sktj

image.png

需要carousel.js:Bootstrap: carousel.js v3.0.2

设置属性 data-target data-slide-to carousel slide carousel-indicators carousel-inner

代码语言:javascript
复制
        <div id="homepage-feature" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
                <li data-target="#homepage-feature" data-slide-to="1"></li>
                <li data-target="#homepage-feature" data-slide-to="2"></li>
                <li data-target="#homepage-feature" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/okwu.jpg" alt="OKWU.edu Homepage">
                </div>
                <div class="item">
                    <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage">
                </div>
                <div class="item">
                    <img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation">
                </div>
                <div class="item">
                    <img src="img/emancipation.jpg" alt="Emancipation Stories">
                </div>
            </div><!-- /.carousel-inner -->

            <!-- Controls -->
            <a class="left carousel-control" href="#homepage-feature" data-slide="prev">
                <span class="icon fa fa-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#homepage-feature" data-slide="next">
                <span class="icon fa fa-chevron-right"></span>
            </a>
        </div><!-- /#homepage-feature.carousel -->

设置轮播间隔:

( document ).ready(function() { // Set carousel options
( document ).ready(function() { // Set carousel options

('.carousel').carousel({ interval: 8000 // 8 seconds vs. default 5 }); });

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.10.11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需要carousel.js:Bootstrap: carousel.js v3.0.2
  • 设置属性 data-target data-slide-to carousel slide carousel-indicators carousel-inner
  • 设置轮播间隔:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档