Criando um Slider de Imagens Dinâmico com React

Introdução

Hoje, vamos aprender como criar um Slider de Imagens simples, mas elegante, usando React. Essa é uma habilidade essencial para qualquer desenvolvedor front-end, já que sliders são comumente usados em websites para destacar conteúdos importantes de forma interativa.

Passo 1: Estrutura Básica do Projeto

Primeiro, crie um novo projeto React com create-react-app e crie um novo componente chamado ImageSlider.

npx create-react-app meu-slider
cd meu-slider

Passo 2: Componente ImageSlider

Agora, vamos criar o componente ImageSlider. Este componente aceitará um array de URLs de imagens como propriedades e as exibirá em um slider.

import React, { useState } from 'react';

const ImageSlider = ({ images }) => {
  const [current, setCurrent] = useState(0);
  const length = images.length;

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1);
  };

  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };

  if (!Array.isArray(images) || images.length <= 0) {
    return null;
  }

  return (
    <section className='slider'>
      {images.map((image, index) => (
        <div key={index} className={index === current ? 'slide active' : 'slide'}>
          {index === current && (
            <img src={image} alt='travel image' className='image' />
          )}
        </div>
      ))}
      <button className='left-arrow' onClick={prevSlide}>Prev</button>
      <button className='right-arrow' onClick={nextSlide}>Next</button>
    </section>
  );
};

export default ImageSlider;

Passo 3: Adicionando Estilos

Vamos adicionar um pouco de CSS para tornar nosso slider visualmente atraente.

.slider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide {
  opacity: 0;
  transition-duration: 1s ease;
}

.slide.active {
  opacity: 1;
  transition-duration: 1s;
  transform: scale(1.08);
}

.image {
  width: 500px;
  height: 300px;
  border-radius: 10px;
}

.left-arrow, .right-arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  border: none;
  padding: 10px;
  border-radius: 50%;
  user-select: none;
}

.left-arrow {
  left: 25px;
}

.right-arrow {
  right: 25px;
}

Conclusão

E assim, criamos um belo Slider de Imagens em React! Este é um componente versátil que pode ser facilmente integrado e personalizado em qualquer projeto React.