frontend/js/slider.js - master - varsl/HTML-CSS

frontend/js/slider.js
217 строк7 KB
varsl
Добавление JavaScript логики
21 дек 2025, 23:16
21 дек 2025, 23:169dd2130
class AnimalSlider {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        if (!this.container) return;

        this.track = this.container.querySelector('.slider-track');
        this.slides = this.container.querySelectorAll('.slide');
        this.prevBtn = this.container.querySelector('.prev-btn');
        this.nextBtn = this.container.querySelector('.next-btn');

        this.currentSlide = 0;
        this.slideCount = this.slides.length;
        this.slideWidth = this.slides[0].offsetWidth;
        this.isAnimating = false;
        this.autoPlayInterval = null;

        this.init();
    }

    init() {
        this.updateSlider();

        if (this.prevBtn) {
            this.prevBtn.addEventListener('click', () => this.prevSlide());
        }

        if (this.nextBtn) {
            this.nextBtn.addEventListener('click', () => this.nextSlide());
        }

        this.startAutoPlay();

        this.container.addEventListener('mouseenter', () => this.stopAutoPlay());
        this.container.addEventListener('mouseleave', () => this.startAutoPlay());

        window.addEventListener('resize', () => {
            this.slideWidth = this.slides[0].offsetWidth;
            this.updateSlider();
        });

        this.addKeyboardNavigation();
        this.addTouchSupport();
    }

    updateSlider() {
        if (!this.track) return;

        const transformValue = -this.currentSlide * this.slideWidth;
        this.track.style.transform = `translateX(${transformValue}px)`;

        this.updateButtons();
    }

    prevSlide() {
        if (this.isAnimating) return;

        this.isAnimating = true;
        this.currentSlide = (this.currentSlide - 1 + this.slideCount) % this.slideCount;
        this.updateSlider();

        setTimeout(() => {
            this.isAnimating = false;
        }, 500);
    }

    nextSlide() {
        if (this.isAnimating) return;

        this.isAnimating = true;
        this.currentSlide = (this.currentSlide + 1) % this.slideCount;
        this.updateSlider();

        setTimeout(() => {
            this.isAnimating = false;
        }, 500);
    }

    goToSlide(index) {
        if (this.isAnimating || index < 0 || index >= this.slideCount) return;

        this.isAnimating = true;
        this.currentSlide = index;
        this.updateSlider();

        setTimeout(() => {
            this.isAnimating = false;
        }, 500);
    }

    updateButtons() {
        if (this.prevBtn && this.nextBtn) {
            this.prevBtn.disabled = this.currentSlide === 0;
            this.nextBtn.disabled = this.currentSlide === this.slideCount - 1;
        }
    }

    startAutoPlay() {
        this.stopAutoPlay();
        this.autoPlayInterval = setInterval(() => {
            this.nextSlide();
        }, 5000);
    }

    stopAutoPlay() {
        if (this.autoPlayInterval) {
            clearInterval(this.autoPlayInterval);
            this.autoPlayInterval = null;
        }
    }

    addKeyboardNavigation() {
        document.addEventListener('keydown', (e) => {
            if (!this.container.contains(document.activeElement)) return;

            switch(e.key) {
                case 'ArrowLeft':
                    e.preventDefault();
                    this.prevSlide();
                    break;
                case 'ArrowRight':
                    e.preventDefault();
                    this.nextSlide();
                    break;
                case 'Home':
                    e.preventDefault();
                    this.goToSlide(0);
                    break;
                case 'End':
                    e.preventDefault();
                    this.goToSlide(this.slideCount - 1);
                    break;
            }
        });
    }

    addTouchSupport() {
        let startX = 0;
        let endX = 0;
        const minSwipeDistance = 50;

        this.container.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
            this.stopAutoPlay();
        }, { passive: true });

        this.container.addEventListener('touchmove', (e) => {
            endX = e.touches[0].clientX;
        }, { passive: true });

        this.container.addEventListener('touchend', () => {
            const distance = startX - endX;

            if (Math.abs(distance) > minSwipeDistance) {
                if (distance > 0) {
                    this.nextSlide();
                } else {
                    this.prevSlide();
                }
            }

            this.startAutoPlay();
        });
    }

    addIndicators() {
        const indicatorsContainer = document.createElement('div');
        indicatorsContainer.className = 'slider-indicators';

        for (let i = 0; i < this.slideCount; i++) {
            const indicator = document.createElement('button');
            indicator.className = 'slider-indicator';
            indicator.setAttribute('aria-label', `Перейти к слайду ${i + 1}`);
            indicator.addEventListener('click', () => this.goToSlide(i));

            if (i === this.currentSlide) {
                indicator.classList.add('active');
            }

            indicatorsContainer.appendChild(indicator);
        }

        this.container.appendChild(indicatorsContainer);

        this.updateIndicators = () => {
            const indicators = indicatorsContainer.querySelectorAll('.slider-indicator');
            indicators.forEach((indicator, index) => {
                indicator.classList.toggle('active', index === this.currentSlide);
            });
        };
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const animalSlider = new AnimalSlider('animalSlider');

    const slides = document.querySelectorAll('.slide');
    slides.forEach(slide => {
        slide.addEventListener('click', function() {
            const animalName = this.querySelector('h3').textContent;
            console.log(`Выбрано животное: ${animalName}`);
        });
    });

    const slideContents = document.querySelectorAll('.slide-content');
    slideContents.forEach(content => {
        content.style.animation = 'fadeIn 0.8s ease-out';
    });

    const playButtons = document.querySelectorAll('.play-sound');
    playButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            const sound = this.getAttribute('data-sound');
            console.log(`Воспроизведение звука: ${sound}`);
        });
    });
});