im tried to build logo carousel in vue. The issue im facing is that animation is not working that enable images to go from left to right. in addition im planning to add another one but right to left animation

i have tried to convert html/css code and integrate them to work in vue but it didnt work as expected. The animation works fine but once last item pass div section, it suddenly reset again, which makes it not a smooth linear animation. if anyone can provide me with suggestion into how to solve this code to make animation smooth.

<template>
    <div class="slider">
      <div class="slide-track">
        <div class="slide" v-for="(slide, index) in slides" :key="index">
          <img :src="slide" height="100" width="250" alt="" />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        slides: [
          "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png",
          "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png",
          "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png",
          "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png",
          "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png",
          "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png",
          "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png",
        ],
      };
    },
  };
  </script>
  
  <style lang="scss" scoped>
  
  @mixin white-gradient {
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  }
  
  $animationSpeed: 20s;
  
  // Animation
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7))}
  }
  
  
  // Styling
  .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 {
      height: 100px;
      width: 250px;
    }
  }
  </style>

>Solution :

The issue with your logo carousel animation is that the number of slides in the slide-track is not sufficient to create a smooth continuous animation. Currently, you have 7 slides, but the animation requires more slides to smoothly transition from the last slide back to the first slide.

To create a smooth linear animation, you can duplicate the slides in the slides array so that you have enough slides to cover the entire width of the carousel container. Here’s an updated version of your code with duplicated slides:

<template>
  <div class="slider">
    <div class="slide-track">
      <div class="slide" v-for="(slide, index) in duplicatedSlides" :key="index">
        <img :src="slide" height="100" width="250" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: [
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png",
      ],
    };
  },
  computed: {
    duplicatedSlides() {
      // Duplicate the slides to ensure enough slides for smooth animation
      return [...this.slides, ...this.slides];
    },
  },
};
</script>

In this updated code, the duplicatedSlides computed property duplicates the slides array to ensure that there are enough slides to cover the entire width of the carousel. By duplicating the slides, the animation will smoothly transition from the last slide back to the first slide without any sudden resets.

Make sure to adjust the width of the .slider class and the calc(250px * 14) value in the .slide-track class to accommodate the increased number of slides.

With these modifications, your logo carousel animation should work smoothly.

To add a second slide-track with reversed animation, you can create a separate CSS class for the reversed animation and apply it to the second slide-track element. This way, you can customize the animation properties for the reversed slider independently.

Here’s an example of how you can achieve this:

<template>
  <div class="slider">
    <div class="slide-track">
      <div class="slide" v-for="(slide, index) in slides" :key="index">
        <img :src="slide" height="100" width="250" alt="" />
      </div>
    </div>

    <div class="slide-track reverse">
      <div class="slide" v-for="(slide, index) in reversedSlides" :key="index">
        <img :src="slide" height="100" width="250" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: [
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png",
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png",
      ],
    };
  },
  computed: {
    reversedSlides() {
      return this.slides.slice().reverse(); // Reversed copy of the slides array
    },
  },
};
</script>

<style lang="scss" scoped>
// ...

.slide-track.reverse {
  animation: reverse-scroll $animationSpeed linear infinite;
}

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

// ...
</style>

In this example, I added a new slide-track div with a reverse class, which applies the reversed animation. I also added a computed property reversedSlides that returns a reversed copy of the original slides array.

By using the separate CSS class and the reversed array, you can create a second slide-track with its own animation and different set of images.