Add animation to React Slider

76
May 30, 2021, at 00:50 AM

I have a very simple react slider. There's an option to navigation between the slides. I'd like to add a sliding animation. Preferably, I would not like to use any library, if possible, a solution using css/gsap would be great.

export default function Slider({ slides }: Props) {
    const [current, setCurrent] = useState(0);
    const changeSlide = (i: number) => setCurrent(i);
    return (
        <>
            <ul className='bg-gray-50'>
                {slides.map((slide, i: number) => (
                    <li style={{ display: current === i ? 'block' : 'none' }}>
                        <div className='flex flex-row w-full items-center mb-7'>
                            <img src={require(`../assets/images/${slide.user}`).default} alt='User 1' className='rounded-full w-10 h-10' />
                            <h5 className='text-xl ml-5'>{slide.name}</h5>
                        </div>
                        <p className='text-lg w-full'>{slide.content}</p>
                    </li>
                ))}
            </ul>
            <div className='flex flex-row mt-10'>
                {slides.map((slide, i: number) => (
                    <div
                        className={`rounded-full w-6 mr-4 h-6 border-2 cursor-pointer ${
                            current === i ? 'bg-purple-500' : 'border-purple-500'
                        }`}
                        onClick={() => changeSlide(i)}
                    />
                ))}
            </div>
        </>
    );
}

Here's how my site looks:

So, when I click on the buttons below to change the slide, the next slide should slide in. Thanks in advance! Any help is greatly appreciated.

READ ALSO
Mysql like query suggest best indexes for fast response

Mysql like query suggest best indexes for fast response

My query takes 90sec for return only 20 rowsQuery has some join and like query for searching keywords

54
SendGrid API is grouping tables together

SendGrid API is grouping tables together

When trying to send an email using sendgrid it is grouping tables togetherThis is how I want the email to look

29
My application icons are intertwined with phone icons

My application icons are intertwined with phone icons

My application icons are intertwined with phone iconsWhat is the solution?

55
PHP - output text one character at a time

PHP - output text one character at a time

Trying to create a old school terminal text effect (one character at a time with a small delay) in PHP - without javascript if possibleAll text written to the screen should go through this function

73