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)& ...
随机推荐
- NET 5 Cron表达式
cron表达式通过特定的规则指定时间,用于定时任务 1. 整体结构 cron表达式是一个字符串,分为6或7个域,每两个域之间用空格分隔,其语法格式为: "秒域 分域 时域 日域 月域 周域 ...
- CentOS7 实战部署tomcat网站服务器
简介:实战演练tomcat网站服务器的搭建 Tomcat:是一个开源免费的Web应用服务器,性能稳定,是目前比较流行的Web应用服务器 tomcat官网下载: https://tomcat.apa ...
- jrebel 启动失败的处理
jrebel 启动失败的处理 今天使用 jrebel 启动项目的时候,突然啥日志都没有,只有一句Disconnected from the target VM, address: '127.0.0.1 ...
- %@ taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c"%报错
用eclipse写jsp代码时发现下面两行代码报错:<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix=&qu ...
- laravel 数据库之DB类
// 取回数据表的第一条数据 DB::table('table')->where('key', 'value')->first(); DB::table('table')->firs ...
- Redis中的常用命令哪些？
a.hset 存储一个哈希键值对的集合 b.hget获取一个哈希键的值c.hdel 删除一个或多个字段 d.hgetall 获取一个哈希是键值对的集合 e.lpush key value向链表左侧添加 ...
- break continue学习
1.break和continue必须使用在循环或者switch语句中 2.当break语句单独存在时.后面不要定义其他语句,因为后面的语句无法执行到 3.break跳出当前所在循环 4.break跳出 ...
- json 与 ajax
json类似与js中的对象,但是json中不能有方法,json相当于python中的字典,但是json中的键值如果是字符串的话,需要加上双引号:ajax是一个前后台配合的技术,它可以让js发送http ...
- 高并发之wait notify notifyAll原理详解
public class WaitTest { public void testWait(){ System.out.println("Start-----"); try { wa ...
- TurtleBot3 Waffle （tx2版华夫）（11）建图-karto建图
1)[Remote PC] 启动roscore $ roscore 2)[TurBot3] 启动turbot3 $ roslaunch turbot3_bringup minimal.launch 3 ...