Show logo slider images endlessly

Question

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));
  }
}

user_15273968 · Answer

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%);
  }
}

user_17663225 · Answer

There are several methods you can choose from.

Using a list

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%);
  }
}

Using slick carousel

it is a JS package that lets you create a responsive carousel. you can read about it [here][1]

Using CSS without margin-left

Instead of having `margin-left`, we will use a gradient to hide the sides.

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 {
    }
}

user_18706466 · Answer

If this is a ux question rather than code, you might try filler color that is tag basid (average color of individual picture) and use a loading method that allows for faster rendering of low quality (on top layer) then ramps up to full quality as it loads, this is a varrient of what most large websites use for images. Essentially gives your user something even if the only thing rendered is a color box. For most you will likley have a HD image almost immediately.

user_4913841 · Answer

For a single image

@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;
}

The issue is that there is no simple answer for this issue. The images are a fixed size and amount, you'll run out of images eventually.

I recommend :

Either stitching the images together, which is much easier but less flexible.
Use JS to spawn an amount that is enough to cover the width of the client + the animation, and spawn them dynamically.
You could make the element double in width, double the image set, and distort the images to fill the 100% site's width, then scroll through using a css translation. I do not recommend this approach for multiple reasons.

user_6797669 · Answer

Most carousels CLONE elements before making them visible to fill that empty space Owl Carousel 2 https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

easy to configure for automatic endless loop but it has this stop motion when autoplayed. I think you could customize the .active, .cloned-item .active transitions to the ones you already have.

Show logo slider images endlessly

5 Answers

Using a list

Using slick carousel

Using CSS without margin-left