bootstrap 轮播图带缩列图两端对齐，并自动换行然后左对齐！
禁止自动轮播 data-interval="false"
完整代码如下：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
8 <script src="js/bootstrap4.min.js" type="text/javascript" charset="utf-8"></script>
9 <link rel="stylesheet" type="text/css" href="css/bootstrap4.5.min.css"/>
10 <style type="text/css">
11 .carousel-indicators{
12 position:static;
13 margin-right: 0;
14 margin-left: 0;
15 display: flex;
16 flex-wrap: wrap;
17 justify-content:space-between;
18 margin-top: 10px;
19 }
20
21 .carousel-indicators li{
22 background-color: rgb(0 0 0 / 33%);
23 width: 124px;
24 height: 90px;
25 border: none;
26 margin-bottom: 10px;
27 margin-right: 0px;
28 margin-left: 0px;
29 box-sizing: border-box;
30 text-indent: inherit;
31 }
32 .carousel-indicators .active img {
33 border: 2px solid #0070ff;
34 }
35
36 /*方法一：最后一行左对齐*/
37 .carousel-indicators > span {
38 width: 124px;
39 margin-right: 0px;
40 }
41
42 /*方法二 最后一行左对齐*/
43 /*.carousel-indicators::after{
44 content:"";
45 width: 32%;
46 }*/
/*适用于每行列数确定的场景*/
/*carousel-indicators：:after { content: ""; flex: auto; }*/
47
48 </style>
49 </head>
50
51 <body>
52
53 <div id="carouselImg" class="carousel slide p-5" data-ride="carousel" data-interval="false">
54 <div class="position-relative">
55 <div class="carousel-inner">
56 <div class="carousel-item active">
57 <img class="d-block w-100" src="img/bicycle/a.jpg"/>
58 </div>
59 <div class="carousel-item">
60 <img class="d-block w-100" src="img/bicycle/b.jpg"/>
61 </div>
62 <div class="carousel-item">
63 <img class="d-block w-100" src="img/bicycle/c.jpg"/>
64 </div>
65 <div class="carousel-item">
66 <img class="d-block w-100" src="img/bicycle/d.jpg"/>
67 </div>
68 <div class="carousel-item">
69 <img class="d-block w-100" src="img/bicycle/e.jpg"/>
70 </div>
71 <div class="carousel-item">
72 <img class="d-block w-100" src="img/bicycle/f.jpg"/>
73 </div>
74 <div class="carousel-item">
75 <img class="d-block w-100" src="img/bicycle/g.jpg"/>
76 </div>
77 <div class="carousel-item">
78 <img class="d-block w-100" src="img/bicycle/h.jpg"/>
79 </div>
80 <div class="carousel-item">
81 <img class="d-block w-100" src="img/bicycle/span.jpg"/>
82 </div>
83 </div>
84 <a class="carousel-control-prev" href="#carouselImg" role="button" data-slide="prev">
85 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
86 <span class="sr-only">Previous</span>
87 </a>
88 <a class="carousel-control-next" href="#carouselImg" role="button" data-slide="next">
89 <span class="carousel-control-next-icon" aria-hidden="true"></span>
90 <span class="sr-only">Next</span>
91 </a>
92 </div>
93
94 <ol class="carousel-indicators">
95 <li data-target="#carouselImg" data-slide-to="0" class="active">
96 <img class="w-100" src="img/bicycle/a.jpg"/>
97 </li>
98 <li data-target="#carouselImg" data-slide-to="1">
99 <img class="w-100" src="img/bicycle/b.jpg"/>
100 </li>
101 <li data-target="#carouselImg" data-slide-to="2">
102 <img class="w-100" src="img/bicycle/c.jpg"/>
103 </li>
104 <li data-target="#carouselImg" data-slide-to="3">
105 <img class="w-100" src="img/bicycle/d.jpg"/>
106 </li>
107 <li data-target="#carouselImg" data-slide-to="4">
108 <img class="w-100" src="img/bicycle/e.jpg"/>
109 </li>
110 <li data-target="#carouselImg" data-slide-to="5">
111 <img class="w-100" src="img/bicycle/f.jpg"/>
112 </li>
113 <li data-target="#carouselImg" data-slide-to="6">
114 <img class="w-100" src="img/bicycle/g.jpg"/>
115 </li>
116 <li data-target="#carouselImg" data-slide-to="7">
117 <img class="w-100" src="img/bicycle/h.jpg"/>
118 </li>
119 <li data-target="#carouselImg" data-slide-to="8">
120 <img class="w-100" src="img/bicycle/span.jpg"/>
121 </li>
122 <span></span><span></span><span></span><span></span>
123 <span></span><span></span><span></span><span></span> <!--要比li少一个哦-->
124 </ol>
125 </div>
126 </body>
127
128 </html>
效果预览：
bootstrap 轮播图带缩列图两端对齐，并自动换行然后左对齐！的更多相关文章
- bootstrap轮播图--兼容IE7
<!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...
- bootstrap轮播图 两侧半透明阴影
用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...
- Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- Bootstrap轮播获取当前活动的焦点对象
在项目中使用了Bootstrap的轮播,需求是轮播下方有一个已读按钮,当点击已读按钮时,隐藏掉当前的焦点的轮播内容: 如图所示: 所以要获取当前的焦点是哪一条: 下方代码是在网络上找到的一个方 ...
- bootstrap轮播组件之“如何关闭自动轮播”
在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...
- 第二百四十八节，Bootstrap轮播插件
Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
- Bootstrap 轮播（Carousel）插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
- bootstrap轮播组件,大屏幕图片居中效果
在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...
- Bootstrap 轮播
[Bootstrap 轮播] 1.要设置一个轮播界面,需要注意以下几点: 1)根div 必须为 class="carousel slide" 2)根div下含有三块子div a)& ...
随机推荐
- 基于frp的内网穿透实例2-通过自定义域名访问部署于内网的 web 服务
原文地址:https://wuter.cn/1837.html/ 一.想要实现的功能 1.将部署在自己电脑上的网站用于公网访问. 2.将未备案域名解析至国内服务器(即我宿舍的老母鸡上). 二.服务端配 ...
- 《Spring Boot 实战纪实》缺失的逻辑
目录 前言 (思维篇)人人都是产品经理 1.需求文档 1.1 需求管理 1.2 如何攥写需求文档 1.3 需求关键点文档 2 原型设计 2.1 缺失的逻辑 2.2 让想法跃然纸上 3 开发设计文档 3 ...
- java采坑之路
判断相等 字符串判断相等 String str1 = null; String str2 = "java金融"; // str1.eq ...
- 本地缓存性能之王Caffeine
前言 随着互联网的高速发展,市面上也出现了越来越多的网站和app.我们判断一个软件是否好用,用户体验就是一个重要的衡量标准.比如说我们经常用的微信,打开一个页面要十几秒,发个语音要几分钟对方才能收到. ...
- 页面中嵌套iframe，微信浏览器长按二维码识别不了
问题:在微信浏览器内,页面中嵌套iframe,iframe中用户触发事件后有个弹框会显示二维码,用户长按二维码可以识别并跳转.尝试了一下,安卓是正常的,但是ios是识别不了的. 解决过程: 1.这里客 ...
- Thread通信与唤醒笔记1
synchronized if判断标记,只有一次,会导致不该信息的线程运行了,出现了数据错误的情况 while判断标记,解决了线程获取执行权之后,是否要运行! notify 只能唤醒一个任意线程,如果 ...
- CI持续集成理论知识
(1)什么是CI What is CI? CI就是持续集成,持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过 ...
- 自动化单元测试（Karma + Mocha）
使用 Karma + Mocha做单元测试 Karma([ˈkɑrmə] 卡玛)是一个测试运行器,它可以呼起浏览器,加载测试脚本,然后运行测试用例 Mocha([ˈmoʊkə] 摩卡)是一个单元测试框 ...
- ADO.NET对SqlServer进行简单的增删改查
对数据库进行增删改查,首先想到的应该就是连接字符串了. 我们的连接字符串是由"Server=地址(本机=local);Database=数据库名称;User Id=登陆用户名;Passwor ...
- 第一章节 BJROBOT ROS 网络配置及移动控制【ROS全开源阿克曼转向智能网联无人驾驶车】
版权声明:该教程版权归北京智能佳科技有限公司所有,未经公司授权禁止引用.发布.转载等,否则将追究其法律责任. 使用前说明:本使用文档说明略微简明,请结合指导视频进行操作会更容易理解!! 第一章节 BJ ...