Карусель зображень у React

Використання каруселі зображень у React для демонстрації кількох зображень компактно та інтерактивно — чудовий спосіб продемонструвати ваші навички. У цьому пості ми створимо повнофункціональну карусель зображень за допомогою React. Цей проєкт допоможе вам зміцнити розуміння стану компонентів, взаємодії користувача та анімацій — важливих навичок для будь-якого фронтенд-розробника.

Крок 1: Налаштування вашого React додатку

Якщо у вас ще немає React додатку, створіть його за допомогою Create React App:

npx create-react-app image-carousel   
cd image-carousel   
npm start

Крок 2: Створення компонента каруселі

У вашій папці src створіть новий файл Carousel.jsx:

import React, { useState } from 'react';  
import './Carousel.css';  

const Carousel = ({ images }) => {  
 const [currentIndex, setCurrentIndex] = useState(0);  

 const nextSlide = () => {  
 setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);  
 };  

 const prevSlide = () => {  
 setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);  
 };  

 return (  

‹    
›    
    );   };      export default Carousel; ```  
## Крок 3: Стилізація каруселі

Створіть новий CSS файл `Carousel.css` і стилізуйте карусель:

.carousel {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 80%;
margin: auto;
overflow: hidden;
}

.carousel-image {
width: 100%;
transition: transform 0.5s ease-in-out;
}

.carousel img {
width: 100%;
height: auto;
border-radius: 10px;
}

button {
background-color: rgba(0, 0, 0, 0.5);
border: none;
color: white;
font-size: 2rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
cursor: pointer;
}

button.prev {
left: 10px;
}

button.next {
right: 10px;
}
```

Крок 4: Додавання анімацій

Щоб зробити переходи між зображеннями плавними, змініть контейнер зображень, використовуючи CSS анімації:

.carousel-image {    
    transform: translateX(-100%);    
    transition: transform 0.5s ease-in-out;   
}    

.carousel img {    
    transform: translateX(${(props) => -props.currentIndex * 100}%);   
}    

Крок 5: Тестування компонента

Оновіть ваш App.js, щоб включити компонент Carousel та протестувати його з тестовими зображеннями:

import React from 'react';   
import Carousel from './Carousel';    

const App = () => {    
    const sampleImages = [    
        'https://via.placeholder.com/800x400?text=Image+1',    
        'https://via.placeholder.com/800x400?text=Image+2',    
        'https://via.placeholder.com/800x400?text=Image+3',    
    ];      

    return (    
        <div>    
            <h1>Image Carousel</h1>    
            <Carousel images={sampleImages} />    
        </div>    
    );    
};    

export default App;    

Основні висновки

• Керування станом у React є важливим для динамічних компонентів.
• CSS анімації додають візуальної привабливості та покращують досвід користувача.
• Модульний підхід забезпечує повторне використання та масштабованість.

Маєте питання чи хочете поділитись своїм впровадженням? Залиште коментар нижче або зв'яжіться зі мною через Linkedin.

Успіхів у кодінгу!

Перекладено з: Image Carousel in React