1

Is there any way to have an infinite image slider like the one below, only using TailWindCss, ReactJS, and plain JS. I am trying to make a component out of this, here is the code so far:

import React from "react";
export default function scrollImagesRight(props) {
  return (
    <div className="w-full bg-red-100 h-[200px]">
      <ul>
        <li>Image 1</li>
        <li>Image 2</li>
        <li>Image 3</li>
        <li>Image 4</li>
        <li>Image 5</li>
        <li>Image 6</li>
        <li>Image 7</li>
        <li>Image 8</li>
      </ul>
    </div>
  );
};

props will contain the image URL, and the li will not have text, it will have the images sent through the props.

Here is what I am trying to achieve: youtube video link

Geeky Quentin
  • 2,469
  • 2
  • 7
  • 28

1 Answers1

3

You can change every style to tailwind from the video... Replace your code with this in the scrollImagesRight Component:

<div className="w-full bg-red-100">
        <div className="h-[200px] m-auto overflow-hidden relative w-auto">
            <ul className="flex w-[calc(250px*14)] animate-scroll">
                <li className="w-[250px]">Image 1</li>
                <li className="w-[250px]">Image 2</li>
                <li className="w-[250px]">Image 3</li>
                <li className="w-[250px]">Image 4</li>
                <li className="w-[250px]">Image 5</li>
                <li className="w-[250px]">Image 6</li>
                <li className="w-[250px]">Image 7</li>
                <li className="w-[250px]">Image 8</li>
                <li className="w-[250px]">Image 9</li>
                <li className="w-[250px]">Image 10</li>
                <li className="w-[250px]">Image 11</li>
                <li className="w-[250px]">Image 12</li>
                <li className="w-[250px]">Image 13</li>
                <li className="w-[250px]">Image 14</li>
            </ul>
        </div>
</div>

Then add this in your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      animation: {
        scroll: 'scroll 40s linear infinite',
      },
      keyframes: {
        scroll: {
          '0%': { transform: 'translateX(0)' },
          '100%': { transform: 'translateX(calc(-250px * 14))' },
        },
      },
    },
  },
};

What this does it to change the animation and keyframes into tailwindcss...

Atif Khan
  • 206
  • 1
  • 10
  • For some reason it jumps from image 14 back to image 7, it doesnt go from 14 back to 1. –  Aug 09 '22 at 18:59
  • Also what would I do if I want to have a dynamic number of images? –  Aug 09 '22 at 19:00
  • just loop it with map – Atif Khan Aug 10 '22 at 01:51
  • alright i edited my answer. so i had a small mistake in the tailwind.config.js because he had only 7 items, but in my example I have 14 so I change 7 to 14. though now I see the problem of the image 14 going teleporting to image 3 and stuff.... I think its better if you mark this as helpful and ask that problem in another question. good luck! – Atif Khan Aug 10 '22 at 02:02