无休止地显示徽标滑块图像

Question

我有一个无限运行的滑块，但是当向左滚动图像时出现空白 space。

滑块到达终点后会重置，但看起来不太好。我的目标是让图像连续流动，这样就不会有空白 space.

可以用什么方法来实现？

PS。在整页中打开 snipper。

.slider2 {
  background: white;
  /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);  */
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: auto;
}

.slider2::before,
.slider2::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slider2::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider2::before {
  left: 0;
  top: 0;
}

.slider2 .slide-track2 {
  -webkit-animation: scroll 20s linear infinite;
  animation: scroll 20s linear infinite;
  display: flex;
  width: calc(250px * 14);
}

.slider2 .slide2 {
  height: 100px;
  width: 250px;
  display: flex;
}

@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

<div class="slider2">
  <div class="slide-track2">
    <div class="slide2" style="margin-left:120px">
      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />
    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>

    <div class="slide2">
      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 83%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />


    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" class="customzoom2" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2" style="width:200px">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="width: 95%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2" style="width:150px">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="width: 71%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 72%!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
  </div>
</div>

Answer 1

有多种方法可供选择。

使用列表

body {
  margin: 0;
  padding: 0;
}

button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

img {
  display: block;
  width: 100%;
}

section {
  width: 100%;
  overflow: hidden;
}

article {
  display: flex;
  width: 200%;
  animation: bannermove 20s linear infinite;
}

article.paused {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

div {
  width: 100%;
}

ul {
  display: flex;
  background: red;
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

li {
  width: 100%;
  background: blue;
}

li:nth-child(2) {
  background: green;
}

li:nth-child(3) {
  background: yellow;
}

@keyframes bannermove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

<section>
  <article>
    <div>
      <ul>
        <li><img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" /></li>
        <li><img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" /></li>
        <li><img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" /></li>
        <li><img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" /></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" /></li>
        <li><img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" /></li>
        <li><img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" /></li>
        <li><img class="smaller-img" src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg"/></li>
      </ul>
    </div>
  </article>
</section>

使用流畅的轮播

它是一个 JS 包，可让您创建响应式轮播。你可以在 [这里][1] 了解它

使用 CSS 不使用 margin-left

我们将使用渐变来隐藏边，而不是使用“margin-left”。

body {
    align-items: center;
    background: #E3E3E3;
    display: flex;
    height: 100vh;
    justify-content: center;
}

@mixin white-gradient {
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}

$animationSpeed: 40s;

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7))}
}

.slider {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
    height: 100px;
    margin: auto;
    overflow:hidden;
    position: relative;
    width: 960px;
    
    &::before,
    &::after {
        @include white-gradient;
        content: "";
        height: 100px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }
    
    &::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    &::before {
        left: 0;
        top: 0;
    }
    
    .slide-track {
        animation: scroll $animationSpeed linear infinite;
        display: flex;
        width: calc(250px * 14);
    }
    
    .slide {
    }
}

<div class="slider">
    <div class="slide-track">
        <div class="slide">
            <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" height="100" width="100" alt="" />
        </div>
        <div class="slide">
            <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" height="100" width="250" alt="" />
        </div>
        <div class="slide" >
            <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" height="100" width="250" alt="" />
        </div>
    </div>
</div>

Answer 2

如果您想要 CSS 唯一的解决方案，那么您需要重复 HTML 中的图像。并且在动画中滚动只剩下 50%:

.slider2 {
  background: white;
  /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);  */
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: auto;
}

.slider2::before,
.slider2::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slider2::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider2::before {
  left: 0;
  top: 0;
}

.slider2 .slide-track2 {
  -webkit-animation: scroll 20s linear infinite;
  animation: scroll 20s linear infinite;
  display: flex;
  width: fit-content;
}

.slider2 .slide2 {
  height: 100px;
  width: 250px;
  display: flex;
}

@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* scroll only 50% */
    transform: translateX(-50%);
  }
}

<div class="slider2">
  <div class="slide-track2">
    <div class="slide2" style="margin-left:0px">
      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />
    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>

    <div class="slide2">
      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 83%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />


    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" class="customzoom2" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2" style="width:200px">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="width: 95%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2" style="width:150px">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="width: 71%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 72%!important;height: auto!important;" height="100" width="250" alt="" />

    </div>

    <!-- repeat -->

    <div class="slide2" style="margin-left:0px">
      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />
    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>

    <div class="slide2">
      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 83%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />


    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" class="customzoom2" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2" style="width:200px">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="width: 95%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 100%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2" style="width:150px">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="width: 71%!important;margin: auto!important;height: auto!important;" height="100" width="250" alt="" />

    </div>
    <div class="slide2">

      <img src="https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg" style="padding:0 5% 0 5%;width: 72%!important;height: auto!important;" height="100" width="250" alt="" />

    </div>

Answer 3

如果这是一个用户体验问题而不是代码问题，您可以尝试使用标记 basid 的填充颜色（单张图片的平均颜色）并使用允许更快渲染低质量（在顶层）的加载方法然后在加载时提升到完整质量，这是大多数大型网站用于图像的变体。即使唯一呈现的是一个颜色框，本质上也可以为您的用户提供一些东西。对于大多数人来说，您几乎可以立即获得高清图像。

Answer 4

单张图片

@keyframes slide {
  from {
    background-position-x: 150px;
  }
  to {
    background-position-x: 0;
  }
}

#slide {
  background-image: url('https://thumbs.dreamstime.com/b/t%C4%99czy-mi%C5%82o%C5%9Bci-serca-t%C5%82o-60045149.jpg');
  background-size: 150px 100px;
  width: 100%;
  height:100px;
  animation: slide 2s linear infinite;
}

<div id="slide"></div>

问题是这个问题没有简单的答案。图片的大小和数量都是固定的，您最终会运行没有图片。

我推荐：

要么把图片拼接在一起，这样容易多了，但灵活性差了。
使用JS生成足以覆盖客户端+动画宽度的数量，并动态生成它们。
您可以使元素的宽度加倍，图像集加倍，并扭曲图像以填充 100% 站点的宽度，然后使用 css 翻译滚动浏览。出于多种原因，我不推荐这种方法。

Answer 5

大多数轮播会先克隆元素，然后再让它们可见以填充空白 space Owl 轮播 2 https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

易于配置自动无限循环，但自动播放时有此停止动作。我认为您可以将 .active、.cloned-item .active 转换自定义为您已有的转换。

无休止地显示徽标滑块图像

Show logo slider images endlessly

html

slider

使用列表

使用流畅的轮播

使用 CSS 不使用 margin-left