Блог

Я разрабатываю слайдер для своего проекта Vue. Теперь, при загрузке страницы, ползунок не работает, значит, я вижу только точку, а не ползунок, но когда я нажимаю на точку, тогда она работает, можно увидеть ползунок.

Вот мой HTML-код:

 <div class="slideshow-container fade">
    <div class="reservationSlider fade" v-for="(consultation, index) in consultations" :key="index">
        <ReservationItem  v-if="Object.keys(consultations).length" :consultation="consultation"
                    :is_active="consultationIsActive()"/>
    </div>
</div>
  

И код JS:

 export default {
    components: {
        Notice,
        ConsultationBox,
        Pagination,
        ReservationItem,
        AdvisorItem
    },
    layout: "sidebar",
    mounted() {
        this.handleAutomaticeButtonEnable();
        this.currentSlide(this.slideIndex);
    },
    data() {
        return {
            activePage: 1,
            consultations: {...this.getConsultations} || {},
            slideIndex: 0,
            sliderTimer: '',
        };
    },
    methods: {
        plusSlides(n) {
            return this.showSlides(this.slideIndex  = n);
        },
        currentSlide(n) {
            if (this.sliderTimer) {
                window.clearTimeout(this.sliderTimer);
            }
            this.showSlides(this.slideIndex = n);
        },
        showSlides(n) {
            var i; 
            var slides = document.getElementsByClassName("reservationSlider");  
            var dots = document.getElementsByClassName("dot");
            console.log(slides.length);
            console.log(slides);    
            if( slides.length ) {
                if (n > slides.length) {
                    this.slideIndex = 1;
                }
                if (n < 1) {
                    this.slideIndex = slides.length;
                }
                for (i = 0; i < slides.length; i  ) { 
                    slides[i].style.display = "none";  
                }
                if(!n) {
                    this.slideIndex  ;  
                }
                if (this.slideIndex > slides.length){ 
                    this.slideIndex = 1; 
                }
                console.log(this.slideIndex);
                for (i = 0; i < dots.length; i  ) { 
                    dots[i].className = dots[i].className.replace(" active", ""); 
                }
                if(slides[this.slideIndex - 1]) {
                    slides[this.slideIndex - 1].style.display = "block";
                } 
                if( dots[this.slideIndex - 1] ) {
                     dots[this.slideIndex - 1].className  = " active"; 
                }
                this.sliderTimer = setTimeout(this.showSlides, 3000); 
            }
        },
    },
    
    more code ..... 
}