我无法正确定义我面临的异常错误我创建了图像滑块,这是我使用CSS制作的无限图像滚动器,但是在重置了滑块的最后一个图像之后完成图像时,我面临的问题是弄乱了过渡,无法正确循环,下面是我张贴的小提琴的链接
请帮助我解决这个问题,您可以观看一下,看看它如何重置而不是连续循环
.slider-area {
width: 100%;
overflow: hidden;
}
.slider {
width: 200%;
display: inline-flex;
margin:10px auto;
transition: ease-in-out all 26s;
-moz-transition: ease-in-out all 26s;
-ms-transition: ease-in-out all 26s;
-webkit-transition: ease-in-out all 26s;
}
.sec-slide-1 {
animation: bannermove 26s linear infinite;
}
.slider > div {
display: flex;
width: auto;
white-space: nowrap;
}
.slider > div > ul {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.slider > div > ul > li {
width: 23vw;
margin: 0 8px;
display: inline-block;
vertical-align: middle;
position: relative;
overflow: hidden;
cursor: pointer;
}
.slider > div > ul > li > img {
width: 100%;
height: 100%;
transition: ease-in-out all .3s;
-webkit-transition: ease-in-out all .3s;
-moz-transition: ease-in-out all .3s;
filter: grayscale(1);
}
.slide-more {
display: block;
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
background-color: #d59003;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 16px;
transition: ease-in-out all .6s;
-webkit-transition: ease-in-out all .6s;
-moz-transition: ease-in-out all .6s;
opacity: 0;
}
.slider > div > ul > li:hover > img {
filter: grayscale(0);
}
.slider > div > ul > li:hover > .slide-more {
top: 50%;
opacity: 1;
}
.slider > div > ul > li:hover > .slide-more:hover {
text-decoration: none;
}
@keyframes bannermove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
<section class="slider-area">
<div class="slider sec-slide-1">
<div>
<ul>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-1.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-2.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-3.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-4.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-5.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-6.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-7.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-8.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-1.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-2.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-3.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-4.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-5.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-6.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-7.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-8.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-1.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-2.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-3.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-4.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-5.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-6.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-7.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-8.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-1.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-2.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-3.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-4.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-5.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-6.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-7.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
<li>
<img src="http://rootdiamonds.com/demo/img/slider-1/africa-8.jpg">
<a href="#" class="slide-more">
More
</a>
</li>
</ul>
</div>
</div>
</section>