JSFiddle - React, Tailwind, and code Playground

by rga4

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Простой слайдер</title>
</head>
<body>
    <div class="slider">
        <div class="frame active">
            <h2>Слайд 1</h2>
            <p>Текст первого слайда...</p>
        </div>

        <div class="frame">
            <h2>Слайд 2</h2>
            <p>Текст второго слайда...</p>
        </div>

        <div class="frame">
            <h2>Слайд 3</h2>
            <p>Текст третьего слайда...</p>
        </div>

        <nav>
            <button class="prev">Назад</button>
            <button class="next">Вперед</button>
        </nav>
    </div>
</body>
</html>

CSS

/* Стили для слайдера */
        .slider {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        .slider .frame {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease-in-out; /* Добавляем анимацию */
        }

        .slider .frame.active {
            display: block;
            transform: translateX(0); /* Отображаем активный фрейм */
        }

        .slider nav {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        .slider nav button {
            background-color: #000;
            color: #fff;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
        }

        .slider nav button:hover {
            background-color: #444;
        }

        /* Стили для анимации */
        .slider .frame.next {
            transform: translateX(100%); /* Сдвигаем следующий слайд за границу */
        }

        .slider .frame.prev {
            transform: translateX(-100%); /* Сдвигаем предыдущий слайд за границу */
        }

        .slider .frame.active.next {
            transform: translateX(0); /* Плавный переход на следующий слайд */
        }

        .slider .frame.active.prev {
            transform: translateX(0); /* Плавный переход на предыдущий слайд */
        }

JavaScript

// Скрипт для переключения слайдов
        const slider = document.querySelector('.slider');
        const frames = slider.querySelectorAll('.frame');
        const prevBtn = slider.querySelector('.prev');
        const nextBtn = slider.querySelector('.next');

        let activeSlideIndex = 0;

        function showSlide(index) {
            frames.forEach(frame => frame.classList.remove('active'));
            frames[index].classList.add('active');
        }

        showSlide(activeSlideIndex);

        nextBtn.addEventListener('click', () => {
            const nextFrameIndex = (activeSlideIndex + 1) % frames.length;
            frames[activeSlideIndex].classList.add('next');
            frames[nextFrameIndex].classList.add('active');

            setTimeout(() => {
                frames[activeSlideIndex].classList.remove('next', 'active');
                activeSlideIndex = nextFrameIndex;
            }, 500); // Время анимации
        });

        prevBtn.addEventListener('click', () => {
            const prevFrameIndex = (activeSlideIndex - 1 + frames.length) % frames.length;
            frames[activeSlideIndex].classList.add('prev');
            frames[prevFrameIndex].classList.add('active');

            setTimeout(() => {
                frames[activeSlideIndex].classList.remove('prev', 'active');
                activeSlideIndex = prevFrameIndex;
            }, 500);
        });