Слайдер

```html Слайдер

Название акции 1

Краткое описание акции 1.

Название акции 2

Краткое описание акции 2.

Название акции 3

Краткое описание акции 3.

``` ```css /* styles.css */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .slider { position: relative; overflow: hidden; width: 100%; max-width: 800px; margin: 0 auto; } .slider-container { display: flex; transition: transform 0.5s ease; } .card { flex: 0 0 100%; padding: 20px; box-sizing: border-box; } .card img { width: 100%; height: auto; border-radius: 8px; } .slider-button { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; z-index: 1; } .prev { left: 10px; } .next { right: 10px; } .dots-container { text-align: center; margin-top: 10px; } .dot { display: inline-block; width: 10px; height: 10px; background-color: gray; border-radius: 50%; margin: 0 5px; cursor: pointer; } .active-dot { background-color: black; } @media (max-width: 768px) { .slider-button { display: none; } } ``` ```javascript // script.js const sliderContainer = document.querySelector('.slider-container'); const cards = document.querySelectorAll('.card'); const prevButton = document.querySelector('.prev'); const nextButton = document.querySelector('.next'); const dotsContainer = document.querySelector('.dots-container'); let currentIndex = 0; // Создание точек cards.forEach((card, index) => { const dot = document.createElement('div'); dot.classList.add('dot'); if (index === 0) { dot.classList.add('active-dot'); } dot.addEventListener('click', () => { goToSlide(index); }); dotsContainer.appendChild(dot); }); function goToSlide(index) { if (index < 0) { index = cards.length - 1; } else if (index >= cards.length) { index = 0; } sliderContainer.style.transform = `translateX(-${index * 100}%)`; currentIndex = index; // Обновление активных точек const dots = document.querySelectorAll('.dot'); dots.forEach((dot, dotIndex) => { if (dotIndex === index) { dot.classList.add('active-dot'); } else { dot.classList.remove('active-dot'); } }); } prevButton.addEventListener('click', () => { goToSlide(currentIndex - 1); }); nextButton.addEventListener('click', () => { goToSlide(currentIndex + 1); }); // Жесты для мобильных устройств let startX; let endX; sliderContainer.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; }); sliderContainer.addEventListener('touchend', (e) => { endX = e.changedTouches[0].clientX; if (endX - startX > 20) { goToSlide(currentIndex + 1); } else if (startX - endX > 20) { goToSlide(currentIndex - 1); } }); ```

Слайдер с тремя карточками

Похожее