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 ...
随机推荐
- SpringBoot获得application.properties中数据的几种方式
转:https://blog.csdn.net/qq_27298687/article/details/79033102 SpringBoot获得application.properties中数据的几 ...
- windows平台上编译mongdb-cxx-driver
编译方法见以下链接,写的非常详细 http://www.pianshen.com/article/9722211716/ 我的编译环境和编译工具如下: 环境:win7或者win10,都试过,没有任何区 ...
- C语言 - 可变参数再stm32中的应用
参考 C 可变参数 | 菜鸟教程 void func(const char* str,...) { ... } func的最后一个参数写成 ... ,表示可变参数, C语言的printf就是类似这种声 ...
- WinForm下开发插件DevExpress安装及使用
WinForm下开发插件DevExpress安装及使用在Visual Studio中安装DevExpress开发插件插件的使用方法简单的Demo介绍下载链接:https://pan.baidu.com ...
- 【转载】JAVA SpringBoot 项目打成jar包供第三方引用自动配置(Spring发现)解决方案
JAVA SpringBoot 项目打成jar包供第三方引用自动配置(Spring发现)解决方案 本文为转载,原文地址为:https://www.cnblogs.com/adversary/p/103 ...
- Bean named 'XXX' is expected to be of type [XXX] but was actually of type [com.sun.proxy.$Proxy7
AOP原理 <aop:aspectj-autoproxy />声明自动为spring容器中那些配置@aspectJ切面的bean创建代理,织入切面. <aop:aspectj-aut ...
- 已知IP地址算子网掩码
子网掩码计算方法有两种: 方法一:利用子网数来计算: 1.首先,将子网数目从十进制数转化为二进制数: 2.接着,统计得到的二进制数的位数,设为N: 3.最后,先求出此IP地址对应的地址类别的子网掩码. ...
- koa2--session的实现
koa2原生功能只提供了cookie的操作,但是没有提供session操作.session只能自己实现或者通过第三方中间件实现. 如果session数据量很小,可以直接存在内存中 如果session数 ...
- Linux E667 同步失败
在使用Vim编辑/proc目录下的文件后,保存,显示"E667 同步失败" 原因 因为proc这个目录是一个虚拟文件系统,它放置的数据都是在内存中,本身不占有磁盘空间,所以使用Vi ...
- Solr基础知识一（安装配置）
最近接到需求,要修改网站内的搜索规则,就去看了下Solr的资料.现在做完需求了,回来做一些笔记,方便以后查找. 一.安装 1.1 配置JDK JDK下载地址为:https://www.oracle.c ...