禁止自动轮播 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 轮播图带缩列图两端对齐，并自动换行然后左对齐！的更多相关文章

  1. bootstrap轮播图--兼容IE7

    <!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...

  2. bootstrap轮播图 两侧半透明阴影

    用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...

  3. Bootstrap 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  4. Bootstrap轮播获取当前活动的焦点对象

        在项目中使用了Bootstrap的轮播,需求是轮播下方有一个已读按钮,当点击已读按钮时,隐藏掉当前的焦点的轮播内容: 如图所示: 所以要获取当前的焦点是哪一条: 下方代码是在网络上找到的一个方 ...

  5. bootstrap轮播组件之“如何关闭自动轮播”

    在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...

  6. 第二百四十八节，Bootstrap轮播插件

    Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...

  7. Bootstrap 轮播（Carousel）插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  8. bootstrap轮播组件,大屏幕图片居中效果

    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...

  9. Bootstrap 轮播

    [Bootstrap 轮播] 1.要设置一个轮播界面,需要注意以下几点: 1)根div 必须为 class="carousel slide" 2)根div下含有三块子div a)& ...

随机推荐

  1. Python将文件夹下的文件名写入excel方便统计

    如题,贴代码: 1 ''' 2 #python将某文件夹下的文件名存储到excel中 3 ''' 4 5 #导入所需模块 6 import os 7 import xlwt 8 9 #定义要处理的文件 ...

  2. C# 编译机器码过程原理之再谈反射

    一.引言 我们知道在Java中有虚拟机,代码运行时虚拟机把Java语言编译成与机器无关的字节码,然后再把字节码编译成机器指令执行,那么在.NET中程序是如何运行的呢? 其实运行原理是一样的,.NET中 ...

  3. ASP.NET Core 中间件 自定义全局异常中间件以及 MVC异常过滤器作用

    中间件是一种装配到应用管道以处理请求和响应的软件. 每个组件: 选择是否将请求传递到管道中的下一个组件. 可在管道中的下一个组件前后执行工作. 请求委托用于生成请求管道. 请求委托处理每个 HTTP ...

  4. Python常用内置对象

    1.在python中处理的一切都是对象. 2.内置对象可直接使用,如数字.字符串.列表.del等. 3.非内置对象需要导入模块才能使用,如正弦函数sin(x),随机数产生函数random()等.

  5. 更改Cmder的λ符号为自定义符号/文字

    此次修改cmder Version为1.3.12.915 Step1. 进入\cmder\vendor\目录,打开clink.lua文件,在51行将ocal lambda = "λ" ...

  6. .NET Core AWS S3云存储

    前言 最近有需要用到AWS S3云存储上传附件,这里对利用.NET或.NET Core在调用SDK APi需要注意的一点小问题做个记录,或许能对后续有用到的童鞋提供一点帮助 AWS S3云存储 官方已 ...

  7. SecureCRT SSH Linux中不显示彩色 字体颜色、文件夹和文件显示的颜色区别开解决办法

    SecureCRT SSH Linux中不显示彩色 字体颜色.文件夹和文件显示的颜色区别开解决办法 实验环境: 刚开始我的情况是这样的:带颜色的显示不出来,然后还能看到,此处有内容,猜测是Secure ...

  8. HashMap的循环姿势你真的掌握了吗？

    hashMap 应该是java程序员工作中用的比较多的一个键值对处理的数据的类型了.这种数据类型一般都会有增删查的方法,今天我们就来看看它的循环方法以前写过一篇关于ArrayList的循环效率问题&l ...

  9. jQuery是如何实现？

    jQuery是什么? jQuery就是一个javascript的类库,函数库. jQuery是如何实现的? jQuery采用的是构造函数模式进行开发的,jQuery是一个类 常用的方法(CSS.属性. ...

  10. JavaCV FFmpeg采集麦克风PCM音频数据

    前阵子用一个JavaCV的FFmpeg库实现了YUV视频数据地采集,同样的采集PCM音频数据也可以采用JavaCV的FFmpeg库. 传送门:JavaCV FFmpeg采集摄像头YUV数据 首先引入 ...