3.5 Реализация вторичных слайдеров (меньших размеров) проблема с переключением вторичных слайдов How
import Slider from './slider';
export default class MiniSlider extends Slider {
constructor(container, next, prev, activeClass, animate, autoplay) {
super(container, next, prev, activeClass, animate, autoplay);
}
decorizeSlides() {
Array.from(this.slides).forEach(slide => {
slide.classList.remove(this.activeClass);
if (this.animate) {
slide.querySelector('.card__title').style.opacity = '0.4';
slide.querySelector('.card__controls-arrow').style.opacity = '0';
}
});
if (!this.slides[0].closest('button')) {
this.slides[0].classList.add(this.activeClass);
}
if (this.animate) {
this.slides[0].querySelector('.card__title').style.opacity = '1';
this.slides[0].querySelector('.card__controls-arrow').style.opacity = '1';
}
}
nextSlide() {
if (this.slides[1].tagName == "BUTTON" && this.slides[2].tagName == "BUTTON") {
this.container.appendChild(this.slides[0]); // Slide
this.container.appendChild(this.slides[1]); // Btn
this.container.appendChild(this.slides[2]); // Btn
this.decorizeSlides();
} else if (this.slides[1].tagName == "BUTTON"){
this.container.appendChild(this.slides[0]); // Slide
this.container.appendChild(this.slides[1]); // Btn
this.decorizeSlides();
} else {
this.container.appendChild(this.slides[0]);
this.decorizeSlides();
}
}
bindTriggers() {
this.next.addEventListener('click', () => this.nextSlide());
this.prev.addEventListener('click', () => {
for (let i = this.slides.length - 1; i > 0; i--) {
if (this.slides[i].tagName !== "BUTTON") {
let active = this.slides[i];
this.container.insertBefore(active, this.slides[0]);
this.decorizeSlides();
break;
}
}
});
}
init() {
try {
this.container.style.cssText = `
display: flex;
flex-wrap: wrap;
overflow: hidden;
align-items: flex-start;
`;
this.bindTriggers();
this.decorizeSlides();
if (this.autoplay) {
setInterval(() => this.nextSlide(), 5000);
}
} catch(e){}
}
}
Мой код. Но при переключении слайда остается один активный и когда он пролистывается то уходит вниз
В консоли:
slider-mini.js:10 Uncaught DOMException: Failed to execute 'remove' on 'DOMTokenList': The token provided must not be empty.
at http://localhost:4000/script.js:11013:23
at Array.forEach (<anonymous>)
at MiniSlider.decorizeSlides (http://localhost:4000/script.js:11012:29)
at MiniSlider.nextSlide (http://localhost:4000/script.js:11039:12)
at HTMLButtonElement.<anonymous> (http://localhost:4000/script.js:11043:52)
Помогите плиз