bootstrap轮播图组件
一、轮播图组件模板（官方文档）
<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="..." alt="图片1">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="图片2">
<div class="carousel-caption">
...
</div>
</div>
</div> <!-- 控制按钮：左右切换 -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
二、分析轮播图组件结构
①carousel 轮播图的模块， slide是否加上滑动效果，data-ride="carousel" 初始化轮播图属性
②data-target="#carousel-example-generic" 控制目标轮播图，data-slide-to="数字" 控制的是轮播图当中的第几张 （索引），class="active" 当前选中的点
③role="listbox" 提供给屏幕阅读器使用，class="carousel-inner"需要轮播的容器，每一个容器里class="item"包括轮播图片img和图片的说明性文字carousel-caption
④left carousel-control是切换上一张的按钮，right carousel-control是切换下一张的按钮，其中的data-slide="next/prev"声明左滑还是右滑，aria-hidden和sr-only是提供给屏幕阅读器使用
三、精简版轮播图模板
<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="..." alt="图片1">
</div>
<div class="item">
<img src="..." alt="图片2">
</div>
<div class="item">
<img src="..." alt="图片3">
</div>
</div>
<!-- 控制按钮：左右切换 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
四、例子：在PC端使用轮播图（高度固定，图片居中，容器铺满，使用背景图）
<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">
<a href="#" class="pc_imgBox" style="background-image: url('images/2-1.png')"></a>
</div>
<div class="item">
<a href="#" class="pc_imgBox" style="background-image: url('images/2-2.png')"></a>
</div>
<div class="item">
<a href="#" class="pc_imgBox" style="background-image: url('images/2-3.png')"></a>
</div>
</div>
<!-- 控制按钮：左右切换 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
.pc_imgBox{
display: block;
height: 400px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.carousel-indicators{
background: #ccc;
}
五、例子：在移动端使用轮播图（宽度自适应，高度自动变化，使用img引入图片）
<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">
<a href="#" class="pc_imgBox"><img src="data:images/1-1.png" alt=""></a>
</div>
<div class="item">
<a href="#" class="m_imgBox"><img src="data:images/1-2.png" alt=""></a>
</div>
<div class="item">
<a href="#" class="m_imgBox"><img src="data:images/1-3.png" alt=""></a>
</div>
</div>
<!-- 控制按钮：左右切换 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
.m_imgBox{
display: block;
width: 100%;
}
.carousel-indicators{
background: #ccc;
}
六、例子：响应式的轮播图（利用媒体查询自适应PC端和移动端）
<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">
<a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-1.png')"></a>
<a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="data:images/1-1.png" alt=""></a>
</div>
<div class="item">
<a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-2.png')"></a>
<a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="data:images/1-2.png" alt=""></a>
</div>
<div class="item">
<a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-3.png')"></a>
<a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="data:images/1-3.png" alt=""></a>
</div>
</div>
<!-- 控制按钮：左右切换 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
.pc_imgBox{
display: block;
height: 400px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.m_imgBox{
display: block;
width: 100%;
}
.carousel-indicators{
background: #ccc;
}
bootstrap轮播图组件的更多相关文章
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- bootstrap轮播图 两侧半透明阴影
用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...
- reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...
- 03 uni-app框架学习：轮播图组件的使用
1.轮播图组件的使用 参照官方文档 2.在页面上加入这个组件 3.在页面中引去css样式 并编写样式 ps:upx单位是什么 简单来说 就相当于小程序中的rpx 是一个自适应的单位 会根据屏幕宽度自动 ...
- Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
- vue移动音乐app开发学习（三）：轮播图组件的开发
本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
- Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- taro 自定义 轮播图组件
1.代码 components/MySwiper/index.js /** * 轮播图组件 */ import Taro, { Component } from '@tarojs/taro'; imp ...
随机推荐
- 打印从1到n位数的最大值
题目: 输入数字n,按顺序打印从1到最大的n位十进制数,如输入3,则打印从1.2.3一直到最大的3位数999 参考大数运算的方法.考虑到位数会很大,所以采用字符串的形式解决.对输入的n,创建一个长度为 ...
- pandas.to_datetime() 只保留【年-月-日】
Outline pandas.to_datetime() 生成的日期会默认带有 [2019-07-03 00:00:00]的分钟精度:但有时并不需要这些分钟精度: 去掉分钟精度 可以通过pandas ...
- Java实现树的遍历以及打印（递归，非递归）
import java.util.LinkedList; import java.util.Stack; public class BinarySearchTree1<E extends Com ...
- Java自学-控制流程 break
Java的break语句 结束循环 示例 1 : break; 直接结束当前for循环 public class HelloWorld { public static void main(String ...
- 【夯实基础】- https和http的主要区别
HTTPS和HTTP的区别主要如下: 1.https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用. 2.http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输 ...
- window.requestAnimationFrame()的使用,处理更流畅的动画效果
https://blog.csdn.net/w2765006513/article/details/53843169 window.requestAnimationFrame()的使用 2016年12 ...
- android之自定义viewGroup仿scrollView的两种实现（滚动跟粘性）
最近一直在研究自定义控件,一般大致分为三种情况:自绘控件,组合控件,继承控件.接下来我们来看下继承控件.在此借鉴一位博主的文章,补充粘性的实现效果,并且加注自己的一些理解.大家也可以查看原文博客.an ...
- js 数组 深拷贝 复制 （汇总）
https://www.cnblogs.com/zhoupengyi/p/6048955.html https://www.cnblogs.com/racyily/p/3532176.html htt ...
- 前端JS
目录 1.javascript介绍 1.1Web前端有三层: 1.2其中JavaScript基础又分为三个部分: 1.3JavaScript入门易学性 1.4JavaScript的组成 1.5Java ...
- moviepy改进的想码
这个要比前一个厚实点. 更改视频亮度,增加字幕,去除音轨,淡入特效,转换,截取时间,控制位置,组合图框,合成多段, 嗯,很多都有了. from django.test import TestCase ...