专栏首页sktjbootstrap3 轮播图片 传送带 carousel

bootstrap3 轮播图片 传送带 carousel

image.png

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

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

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

设置轮播间隔:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap carousel 轮播

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap 轮播 幻灯片 常用样式

    <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators">...

    用户5760343
  • bootstrap 轮播 幻灯片 常用样式 2

    <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators">...

    用户5760343
  • dedecms自增标签[field:global.autoindex/]的运用

      用bootstrap建站时用到幻灯片切换模块,里面有个active(下面代码中的data-slide-to="0"),其余的按顺序递增(1,2),如果用de...

    ytkah
  • bootstrap carousel 轮播

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • 「R」数据操作(三):高效的data.table

    data.table包提供了一个加强版的data.frame,它运行效率极高,而且能够处理适合内存的大数据集,它使用[]实现了一种自然地数据操作语法。使用下面命...

    王诗翔呀
  • ajax请求解析json数据渲染在前端界面

    祈澈菇凉
  • 手把手教你三步完成测试监控系统搭建

    笔者所在的项目组有多个测试环境,偶尔会出现由于程序错误导致负载飙升或日志打满磁盘的问题。基于早发现、早治疗的原则,我们可以构建一个web应用,从而对服务器的负载...

    测试开发社区
  • .net core 实现简单爬虫—抓取博客园的博文列表

    晓晨
  • caffe 依赖的作用

    1.      Boost库:它是一个可移植、跨平台,提供源代码的C++库,作为标准库的后备。

    bear_fish

扫码关注云+社区

领取腾讯云代金券