Bootstrap轮播插件简单使用方法介绍


Posted in Javascript onJune 21, 2016

本文细致的为大家分享了Bootstrap轮播插件简单实例,供大家参考,具体内容如下

使用Bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入

效果图:

Bootstrap轮播插件简单使用方法介绍

bootstrap.min.js. 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 
  <!—轮播导航 -->
  <ol class="carousel-indicators">
 
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 
  <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
  </ol>
  <!—轮播项目 -->
  <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src="~/images/Chrysanthemum.jpg" />
   <div class="carousel-caption"> 
   ffffffff
   </div> 
  </div>
   <div class="item">
   <img src="~/images/Desert.jpg" />
 
   <div class="carousel-caption">
 
   xxxxxxxxxxxxxxxx
   </div> 
  </div>
   <div class="item">
   <img src="~/images/Lighthouse.jpg" /> 
   <div class="carousel-caption"> 
   mmmmmmmmmmmm 
   </div>
  </div>
  </div>
 
  <!—轮播导航 -->
 
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 
  <span class="glyphicon glyphicon-chevron-left"></span>
 
  <span class="sr-only">Previous</span> 
  </a> 
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
  <span class="glyphicon glyphicon-chevron-right"></span>
   <span class="sr-only">Next</span>
 
  </a> 
 </div>

小编再为大家推荐一篇文章:全面解析Bootstrap图片轮播效果

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
php 修改密码实现代码
May 24 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
JavaScript实现星级评价效果
May 17 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 #Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 #Javascript
第三篇Bootstrap网格基础
Jun 21 #Javascript
Bootstrap三种表单布局的使用方法
Jun 21 #Javascript
第二篇Bootstrap起步
Jun 21 #Javascript
基于zepto.js简单实现上传图片
Jun 21 #Javascript
第一篇初识bootstrap
Jun 21 #Javascript
You might like
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
javascript 播放器 控制
2007/01/22 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python图像处理之镜像实现方法
2015/05/30 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Notino法国:购买香水和化妆品
2019/04/15 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
技校毕业生自荐信
2014/06/03 职场文书
实习介绍信模板
2015/01/30 职场文书
2016新年慰问信范文
2015/03/25 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
小学教研工作总结2015
2015/05/13 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
Python中request的基本使用解决乱码问题
2022/04/12 Python