class Carousel {
constructor(el, imgSrc) {
this.createCarousel(el, imgSrc);
let max = imgSrc.length;
this.max = max;
}
createCarousel(el, imgSrc) {
const track = document.createElement("ul");
track.classList.add("carousel__track");
el.appendChild(track);
for (let i = 0; i < imgSrc.length; i++) {
const imageContainer = document.createElement("li");
imageContainer.classList.add("carousel__image-container");
const photo = document.createElement("img");
photo.classList.add("carousel__image");
photo.src = imgSrc[i];
imageContainer.appendChild(photo);
track.appendChild(imageContainer);
this.imageContainer = imageContainer;
}
//next button
const nextButton = document.createElement("button");
nextButton.classList.add("carousel__next");
nextButton.addEventListener("click", this.next);
el.appendChild(nextButton);
}
next() {
if (true) {
console.log(this.max);
}
}
}
createCarousel(el, imgSrc) {
const track = document.createElement("ul");
track.classList.add("carousel__track");
el.appendChild(track);
for (let i = 0; i < imgSrc.length; i++) {
const imageContainer = document.createElement("li");
imageContainer.classList.add("carousel__image-container");
const photo = document.createElement("img");
photo.classList.add("carousel__image");
photo.src = imgSrc[i];
imageContainer.appendChild(photo);
track.appendChild(imageContainer);
this.imageContainer = imageContainer; }
//next button
const nextButton = document.createElement("button");
nextButton.classList.add("carousel__next");
nextButton.addEventListener("click", this.next);
el.appendChild(nextButton);
}
next() {
if (true) {
console.log(this.max);
}
}
}
I need to access max variable from constructor in the method of click event listener (next). this will reference to button itself. How do I access the constructor variables. also need to access the imageContainer variable(one where the elements were created) in the next method,and be abble to add/mofify styles to it