专栏首页sktjbootstrap carousel 轮播

bootstrap carousel 轮播

image.png

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <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> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </body> </html>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap3 轮播图片 传送带 carousel

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

    用户5760343
  • bootstrap 登录 常用

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

    用户5760343
  • bootstrap 登录注册表单 常用

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

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

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

    ytkah
  • bootstrap3 轮播图片 传送带 carousel

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

    用户5760343
  • 九宫格布局

    高考活动页面需要在一个页面容器中,实现一个两行三列宽度自适应缩放,且图片等比例缩放,随着浏览器宽度进行自适应缩放的布局。 中间的图片需要自适应,随着页面宽度的变...

    Tiffany_c4df
  • BBS论坛(十九)

    zhang_derek
  • ajax请求解析json数据渲染在前端界面

    祈澈菇凉
  • 列表

    达达前端
  • ASP.NET MVC5+EF6+EasyUI 后台管理系统(65)-MVC WebApi 用户验证 (1)

    前言: WebAPI主要开放数据给手机APP,其他需要得知数据的系统,或者软件应用,所以移动端与系统的数据源往往是相通的。 Web 用户的身份验证,及页面操作权...

    用户1149182

扫码关注云+社区

领取腾讯云代金券