使用关键帧css3的无限循环滑块 [英] infinite loop slider using keyframes css3

问题描述

我正在使用css3关键帧制作滑块。我不希望我的最后一张幻灯片直接跳到第一张幻灯片。我发现了一些与之相关的问题，并发现复制第一个图像技巧是可行的。

I was making a slider using css3 keyframes. I don't want my last slide directly jump to first slide. I found some questions related to it and found that duplicating the first image trick will work.

第一次效果很好，但是第二张幻灯片需要两倍的时间才能完成正常时间很明显，因为最后一张幻灯片和第一张幻灯片是相同的。

It works fine first time, but second time the first slide take double time compare to normal time which is obvious because last slide and first slide are same.

那么有什么办法可以解决此问题？

So is there any way to resolve this issue?

我也找到了 此答案 ，在这种情况下，最后一个解决方案太接近了，无法回答这个问题，但是问题是它从什么时候开始出现，即它是从右边发出的，即 transform：translateX（100％）我不要我希望我的图片从 transform：translateX（0）开始。

Also I found this answer, in this the last solution is too close to answer this question, but the problem is when it starts, its coming from the right i.e transform:translateX(100%) which I don't want. I want my image to start from the transform:translateX(0).

除了重复第一个图像外，还有什么方法可以制作滑块，它看起来像是使用具有相同滑动时间的css3关键帧的无限循环

So is there any way to make a slider, except repeating the first image, which looks like infinite loop using css3 keyframes having same sliding time

堆栈代码段

Stack Snippet

.inner {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.images-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-animation: slideToLeft 10s ease infinite;
  animation: slideToLeft 10s ease infinite;
}

@keyframes slideToLeft {
  0%,
  20% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  25%,
  45% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  50%,
  70% {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
  75%,
  100% {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%);
  }
}

<div class="inner">
  <div class="images-wrapper">
    <img src="http://via.placeholder.com/200x200/ff0000" alt="">
    <img src="http://via.placeholder.com/200x200/00ff00" alt="">
    <img src="http://via.placeholder.com/200x200/0000ff" alt="">
    <img src="http://via.placeholder.com/200x200/ff0000" alt="">
  </div>
</div>

推荐答案

一个想法是也将第一张图像移动到最后，以创建重复效果。这将在后面完成，所以没人会看到它，然后您可以进行调整以使第一张幻灯片花费更少的时间：

An idea is to also move the first image to make it at the end to create the duplicate effect. This will be done behind so no one will see it then you can adjust to make the first slide take less time:

.inner {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position:relative;
}

.images-wrapper {
  display: flex;
  align-items: center;
  animation: slideToLeft 10s ease infinite 1s;
}
img:first-child {
  z-index:-1;
  animation: image-change 10s ease infinite 1s;
}

@keyframes image-change {
 0%,50% {
    transform: translateX(0%);
  }
  70%,100% {
    transform: translateX(300%);
  }
}

@keyframes slideToLeft {
  0%,
  10% {
    transform: translateX(0);
  }
  15%,
  45% {
    transform: translateX(-100%);
  }
  50%,
  80% {
    transform: translateX(-200%);
  }
  85%,
  100% {
    transform: translateX(-300%);
  }
}

<div class="inner">
  <div class="images-wrapper">
    <img src="http://via.placeholder.com/200x200/ff0000" alt="">
    <img src="http://via.placeholder.com/200x200/00ff00" alt="">
    <img src="http://via.placeholder.com/200x200/0000ff" alt="">
  </div>
</div>

这篇关于使用关键帧css3的无限循环滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！