87,910
社区成员
发帖
与我相关
我的任务
分享为什么轮播过程中两边图片会往两边多移动距离
为什么轮播过程中两边图片会往两边多移动距离，轮播结束图片又会回到正常位置
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="JS/jquery-1.11.2.min.js"></script>
</head>
<style type="text/css">
.carousel-control.left {
background-image:none;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
left: auto;
right: 0;
background-image:none;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
</style>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="container">
<div class="row">
<div class="carousel-inner col-md-12">
<div class="item active">
<div class="row">
<div class="col-md-4" >
<img src="img/project-item-01.jpg" alt="First slide">
</div>
<div class="col-md-4">
<img src="img/project-item-02.jpg" alt="Second slide">
</div>
<div class="col-md-4">
<img src="img/project-item-03.jpg" alt="Third slide">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-md-4">
<img src="img/project-item-04.jpg" alt="First slide">
</div>
<div class="col-md-4">
<img src="img/project-item-05.jpg" alt="Second slide">
</div>
<div class="col-md-4">
<img src="img/project-item-06.jpg" alt="Third slide">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<img src="img/project-item-07.jpg" alt="First slide">
</div>
<div class="col-md-4">
<img src="img/project-item-05.jpg" alt="Second slide">
</div>
<div class="col-md-4">
<img src="img/project-item-02.jpg" alt="Third slide">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
<script src="JS/bootstrap.min.js"></script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
strife013 2021-01-15
- 打赏
- 举报
用chrome调试下不就知道了
m0_53909391 2021-01-15
- 打赏
- 举报
请问大佬解决了吗？
Populus_diversifolia 2018-03-16
- 打赏
- 举报
轮播过程是这样的，这个距离我怎么改还是有
Populus_diversifolia 2018-03-16
- 打赏
- 举报
Populus_diversifolia 2018-03-16
- 打赏
- 举报
没有开始轮播时候是这样的
