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)& ...
随机推荐
- Log4Net日志的简单使用示例
前言 源码参考示例地址 http://www.51aspx.com/Code/log4netusedemo/2707 本例博客园源码 https://files.cnblogs.com/files/m ...
- 简单介绍下各种 JavaScript 解析器
作者:沧海 各种js解析器是前端工程化的基石,可以说如果没有它,很多工程化都无法正常执行,我们每天用到的babel.webpack.eslint.TypeScript背后都需要一套对应的js解析器,今 ...
- Java源码研究001：关于List的并发修改异常
这个就是实现一个简单的 ArrayList 的遍历,如果存在一个为"aaa"的值,就添加一个"ccc" package Array; import java.u ...
- 在 easyui中获取form表单中所有提交的数据 拼接到table列表中
form表单===== <!-- 并用药品填写信息弹框 --> <div id="usingProdctMsgDiv" style="display: ...
- （数据科学学习手札101）funcy：Python中的函数式编程百宝箱
本文示例文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 我们在使用Python完成日常任务时,经常会遇到 ...
- JDK，JRE，JVM三者之间的关系和作用
1,定义: JDK: Java Develpment Kit java 开发工具 bin:最主要的是编译器(javac.exe) include:java和JVM交互用的头文件 lib:类库 JRE: ...
- 【Azure Application Insights】在Azure Function中启用Application Insights后，如何配置不输出某些日志到AI 的Trace中
问题描述 基于.NET Core的Function App如果配置了Application Insights之后,每有一个函数被执行,则在Application Insights中的Logs中的tra ...
- [php]配置文件中的超时时间
概要 php.ini l max_execution_time l max_input_time php-fpm.conf l process_control_timeout l reques ...
- JS function 是函数也是对象, 浅谈原型链
JS function 是函数也是对象, 浅谈原型链 JS 唯一支持的继承方式是通过原型链继承, 理解好原型链非常重要, 我记录下我的理解 1. 前言 new 出来的实例有 _proto_ 属性, 并 ...
- 短信平台软件开发,短信发送平台销售,短信软件源码,G客短信发送平台
一:web短信平台组成 需要短信软件平台源码的联系QQ:290615413 vx:290615413 整套短信系统平台还是由B/S(客户端+后台,取消了以前C/S的管理后台) ,C/S发送服务端和 ...