Search code examples
htmlslider

Show logo slider images endlessly

I have a slider that runs infinitely, however the blank space appears when images are being scrolled left.

The slider resets once it's reaches it's end but It doesn't look nice. My goal is to make continuous flow of images so that there is no blank space.

What methods could be used to make achieve this?

PS. Open snipper in full page.

.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>

Solution

  • If you want CSS only solution then you need to repeat the images in HTML. And and in the animation scroll left only 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>