Почему сбор данных из html не передается в класс JavaScript? - PullRequest
Новая
       58

Почему сбор данных из html не передается в класс JavaScript?

0 голосов
/ 30 мая 2020

У меня есть класс JavaScript ниже в отдельном JS файле 

class Slideshow {
    constructor() {
        this.initSlides();
        this.initSlideshow();
        this.loadImage();
    }

    // Set a `data-slide` index on each slide for easier slide control.
    initSlides() {
        this.container = $('[data-slideshow]');
        this.slides = this.container.find('img');
        this.slides.each((idx, slide) => $(slide).attr('data-slide', idx));
    }

    // Pseudo-preload images so the slideshow doesn't start before all the images
    // are available.
    initSlideshow() {
        this.imagesLoaded = 0;
        this.currentIndex = 0;
        this.setNextSlide();
        this.slides.each((idx, slide) => {
            $('<img>').on('load', $.proxy(this.loadImage, this)).attr('src', $(slide).attr('src'));
        });
    }

    // When one image has loaded, check to see if all images have loaded, and if
    // so, start the slideshow.
    loadImage() {
        this.imagesLoaded++;
        if (this.imagesLoaded >= this.slides.length) { this.playSlideshow() }
    }

    // Start the slideshow.
    playSlideshow() {
        alert("hi");
        this.slideshow = window.setInterval(() => { this.performSlide() }, 3500);
    }

    // 1. Previous slide is unset.
    // 2. What was the next slide becomes the previous slide.
    // 3. New index and appropriate next slide are set.
    // 4. Fade out action.
    performSlide() {
        if (this.prevSlide) { this.prevSlide.removeClass('prev fade-out') }

        this.nextSlide.removeClass('next');
        this.prevSlide = this.nextSlide;
        this.prevSlide.addClass('prev');

        this.currentIndex++;
        if (this.currentIndex >= this.slides.length) { this.currentIndex = 0 }

        this.setNextSlide();

        this.prevSlide.addClass('fade-out');
    }

    setNextSlide() {
        this.nextSlide = this.container.find(`[data-slide="${this.currentIndex}"]`).first();
        this.nextSlide.addClass('next');
    }
}

И ниже HTML, где в списке изображений, которые нужно повернуть, отмечено тегом div data-slideshow. 

<div class="img-container" data-slideshow>
    <img alt="img1" height="1156" width="868" src="/images/Home_Background.jpg?auto=compress,format&w=1440" />
    <img alt="img2" height="100" width="75" src="/images/Home_Background00.jpg?auto=compress,format&w=1440" />
    <img alt="img3" height="100" width="75" src="/images/Home_Background001.jpg?auto=compress,format&w=1440" />
    <img alt="img4" height="100" width="75" src="/images/Home_Background01.jpg?auto=compress,format&w=1440" />
    <img alt="img5" height="100" width="75" src="/images/Home_Background02.jpg?auto=compress,format&w=1440" />
</div>

Теперь коллекция изображений не загружается в "слайд-шоу данных". Это приводит к ошибке javascript в функции InitSlides (). Как исправить?

...