CODEWITHSUNDEEP
javascripthtmlcssreactjs
Psuedodoro
Psuedodoro

Reputation: 303

Infinite autoplay slider ends prematurely, and doesn't infinitely loop

For my personal portfolio, I am trying to make an "infinite auto-play slider" in CSS, which is notoriously hard to do (as others have told me).

Right now, what is happening is that it restarts the slider before it gets to the end (ends prematurely) - and it also doesn't seamlessly go back to the start, as if it never ended (hence the infinite part of the name of the thing).

Here is the HTML/React JSX code I wrote to just display the images (excluding the image links array):

<div className="pt-28 flex items-center flex-col text-center">
      <h1 className="text-4xl pb-12">Infinite slider test</h1>

      <div className="slider">
        <div className="slide-track">
          {cars.map((car, index) => {
            return (
              <div className="slide" key={index}>
                <img src={car} alt="imageforslider" />
              </div>
            );
          })}
        </div>
      </div>
    </div>

Here is the CSS I am currently utilising:

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-180px * 12));
  }
}

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

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

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

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

.slider .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(180px * 24);
}

.slider .slide {
  height: 100px;
  width: 200px;
}

.slide {
  display: grid;
  place-content: center;
}

If you would like a better view of the code, or you would like to play around with it - here is a CodeSandbox for the slider. Looks ugly, but it was ripped from my original project - so should be fine for testing!

Here is the link: https://codesandbox.io/s/elated-driscoll-d77dcj?file=/src/App.js

Thanks in advance for your support!

Upvotes: 2

Views: 3962

Answers (1)

A Haworth
A Haworth

Reputation: 36567

One way of making sure you can get infinite sliding without jerkiness is to have two complete copies of the elements which are to slide.

The animation then moves the containing element from 0% to -50% of its width - that way you get a continuous flow.

Here's a simple HTML/CSS demo with your images:

* {
  margin: 0;
  padding: 0;
  font-size: 0;
  box-sizing: border-box;
}

.slide-track {
  display: inline-block;
  animation: move 20s linear infinite;
  white-space: nowrap;
}

.slide-track>* {
  padding: 2vw;
  display: inline-block;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
<div class="slider">
  <div class="slide-track">
    <div class="slide"><img src="https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&amp;logo=figma&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/Rider-000000.svg?style=for-the-badge&amp;logo=Rider&amp;logoColor=white&amp;color=black&amp;labelColor=crimson" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/webstorm-143?style=for-the-badge&amp;logo=webstorm&amp;logoColor=white&amp;color=black" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/pycharm-143?style=for-the-badge&amp;logo=pycharm&amp;logoColor=black&amp;color=black&amp;labelColor=green" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&amp;logo=git&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&amp;logo=github&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/node.js-%2343853D.svg?style=for-the-badge&amp;logo=node.js&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&amp;logo=react&amp;logoColor=%2361DAFB" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/Qt-%23217346.svg?style=for-the-badge&amp;logo=Qt&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/TensorFlow-%23FF6F00.svg?style=for-the-badge&amp;logo=TensorFlow&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/numpy-%23013243.svg?style=for-the-badge&amp;logo=numpy&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/PyTorch-%23EE4C2C.svg?style=for-the-badge&amp;logo=PyTorch&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&amp;logo=markdown&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/latex-%23008080.svg?style=for-the-badge&amp;logo=latex&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://camo.githubusercontent.com/e922b45bfb79029cf4436e255b0d17b00b651e13b24f1751a9f87b14055fb4b1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a7570797465722d2532334641304630302e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6a757079746572266c6f676f436f6c6f723d7768697465"
        alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/perl-%2339457E.svg?style=for-the-badge&amp;logo=perl&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/java-%23ED8B00.svg?style=for-the-badge&amp;logo=java&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/c%23-%23239120.svg?style=for-the-badge&amp;logo=c-sharp&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/python-%2314354C.svg?style=for-the-badge&amp;logo=python&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&amp;logo=SASS&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&amp;logo=css3&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&amp;logo=html5&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&amp;logo=javascript&amp;logoColor=%23F7DF1E" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&amp;logo=mongodb&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&amp;logo=figma&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/Rider-000000.svg?style=for-the-badge&amp;logo=Rider&amp;logoColor=white&amp;color=black&amp;labelColor=crimson" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/webstorm-143?style=for-the-badge&amp;logo=webstorm&amp;logoColor=white&amp;color=black" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/pycharm-143?style=for-the-badge&amp;logo=pycharm&amp;logoColor=black&amp;color=black&amp;labelColor=green" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&amp;logo=git&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&amp;logo=github&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/node.js-%2343853D.svg?style=for-the-badge&amp;logo=node.js&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&amp;logo=react&amp;logoColor=%2361DAFB" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/Qt-%23217346.svg?style=for-the-badge&amp;logo=Qt&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/TensorFlow-%23FF6F00.svg?style=for-the-badge&amp;logo=TensorFlow&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/numpy-%23013243.svg?style=for-the-badge&amp;logo=numpy&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/PyTorch-%23EE4C2C.svg?style=for-the-badge&amp;logo=PyTorch&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&amp;logo=markdown&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/latex-%23008080.svg?style=for-the-badge&amp;logo=latex&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://camo.githubusercontent.com/e922b45bfb79029cf4436e255b0d17b00b651e13b24f1751a9f87b14055fb4b1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a7570797465722d2532334641304630302e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6a757079746572266c6f676f436f6c6f723d7768697465"
        alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/perl-%2339457E.svg?style=for-the-badge&amp;logo=perl&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/java-%23ED8B00.svg?style=for-the-badge&amp;logo=java&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/c%23-%23239120.svg?style=for-the-badge&amp;logo=c-sharp&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/python-%2314354C.svg?style=for-the-badge&amp;logo=python&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&amp;logo=SASS&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&amp;logo=css3&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&amp;logo=html5&amp;logoColor=white" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&amp;logo=javascript&amp;logoColor=%23F7DF1E" alt="imageforslider"></div>
    <div class="slide"><img src="https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&amp;logo=mongodb&amp;logoColor=white" alt="imageforslider"></div>
  </div>
</div>

Upvotes: 3

Related Questions