What could be the error if the code works?

  • 0
    The code works, but the instructor says there is a bug. I can't see her.
    class Carousel {
    
    	constructor(s) {
    		let initConfig = (obj) => {
    			const settings = {
    				containerID: '#carousel',
    				interval: 5000,
    				slideID: '.slide',
    			};
    
    			if (obj !== undefined) {
    				settings.containerID = obj.containerID || '#carousel';
    				settings.interval = obj.interval || 5000;
    				settings.slideID = obj.slideID || '.slide';
    			}
    
    			return settings;
    		};
    
    		let settings = initConfig(s);
    
    
    		this.container = document.querySelector(settings.containerID);
    		this.slides = this.container.querySelectorAll(settings.slideID);
    
    
    		this.interval = settings.interval;
    	}
    
    	_initProps() {
    		this.slidesCount = this.slides.length;
    		this.currentSlide = 0;
    		this.isPlaying = true;
    
    		this.SPACE = ' ';
    		this.LEFT_ARROW = 'ArrowLeft';
    		this.RIGHT_ARROW = 'ArrowRight';
    		this.FA_PAUSE = '<i class="far fa-pause-circle"></i>';
    		this.FA_PLAY = '<i class="far fa-play-circle"></i>';
    		this.FA_PREV = '<i class="fas fa-angle-left"></i>';
    		this.FA_NEXT = '<i class="fas fa-angle-right"></i>';
    	}
    
    	_initControls() {
    		let controls = document.createElement('div');
    		const PAUSE = `<span id="pause-btn" class="control-pause">${this.FA_PAUSE}</span>`;
    		const PREV = `<span id="prev-btn" class="control-prev">${this.FA_PREV}</span>`;
    		const NEXT = `<span id="next-btn" class="control-next">${this.FA_NEXT}</span>`;
    
    		controls.setAttribute('class', 'controls');
    		controls.setAttribute('id', 'controls-container');
    		controls.innerHTML = PAUSE + PREV + NEXT;
    
    		this.container.appendChild(controls);
    
    		this.pauseBtn = this.container.querySelector('#pause-btn');
    		this.prevBtn = this.container.querySelector('#prev-btn');
    		this.nextBtn = this.container.querySelector('#next-btn');
    	}
    
    	_initIndicators() {
    		let indicators = document.createElement('div');
    		indicators.setAttribute('class', 'indicators');
    		indicators.setAttribute('id', 'indicators-container');
    
    
    		for (let i = 0; i < this.slidesCount; i++) {
    			let indicator = document.createElement('div');
    			indicator.setAttribute('class', 'indicator');
    			//indicator.setAttribute('data-slide-to', `${i}`);
    			i === 0 && indicator.classList.add('active');
    			indicator.dataset.slideTo = `${i}`;
    			indicators.appendChild(indicator);
    		}
    
    		this.container.appendChild(indicators);
    
    		this.indContainer = this.container.querySelector('#indicators-container');
    		this.indItems = this.indContainer.querySelectorAll('.indicator');
    	}
    
    	_initListeners() {
    		this.pauseBtn.addEventListener('click', this.pausePlay.bind(this));
    		this.prevBtn.addEventListener('click', this.prev.bind(this));
    		this.nextBtn.addEventListener('click', this.next.bind(this));
    		this.indContainer.addEventListener('click', this.indicate.bind(this));
    		document.addEventListener('keydown', this._pressKey.bind(this));
    	}
    
    	_gotoNth(n) {
    		this.slides[this.currentSlide].classList.toggle('active');
    		this.indItems[this.currentSlide].classList.toggle('active');
    		this.currentSlide = (this.slidesCount + n) % this.slidesCount;
    		this.slides[this.currentSlide].classList.toggle('active');
    		this.indItems[this.currentSlide].classList.toggle('active');
    	}
    
    	_gotoPrev() {
    		this._gotoNth(this.currentSlide - 1);
    	}
    
    	_gotoNext() {
    		this._gotoNth(this.currentSlide + 1);
    	}
    
    	_play() {
    		this.pauseBtn.innerHTML = this.FA_PAUSE;
    		this.isPlaying = !this.isPlaying;
    		this.timerID = setInterval(this._gotoNext.bind(this), this.interval);
    	}
    
    	_pause() {
    		if (this.isPlaying) {
    			this.pauseBtn.innerHTML = this.FA_PLAY;
    			this.isPlaying = !this.isPlaying;
    			clearInterval(this.timerID);
    		}
    	}
    
    	indicate(e) {
    		let target = e.target;
    
    		if (target.classList.contains('indicator')) {
    			this._pause();
    			this._gotoNth(+target.getAttribute('data-slide-to'));
    		}
    	}
    
    	_pressKey(e) {
    		if (e.key === this.SPACE) this.pausePlay();
    		if (e.key === this.RIGHT_ARROW) this.next();
    		if (e.key === this.LEFT_ARROW) this.prev();
    	}
    
    	pausePlay() {
    		if (this.isPlaying) this._pause();
    		else this._play();
    	}
    
    	prev() {
    		this._pause();
    		this._gotoPrev();
    	}
    
    	next() {
    		this._pause();
    		this._gotoNext();
    	}
    
    
    	init() {
    		//this.indContainer.style.display = 'flex';
    		//document.querySelector('.controls').style.display = 'block';
    		this._initProps();
    		this._initControls();
    		this._initIndicators();
    		this._initListeners();
    		this.timerID = setInterval(() => this._gotoNext(), this.interval);
    	}
    }
    
    class SwipeCarousel extends Carousel {
    	_initListeners() {
    		super._initListeners();
    		this.container.addEventListener('touchstart', this._swipeStart.bind(this));
    		this.container.addEventListener('touchend', this._swipeEnd.bind(this));
    	}
    
    	_swipeStart(e) {
    		this.swipeStartX = e.changedTouches[0].pageX;
    	}
    
    	_swipeEnd(e) {
    		this.swipeEndX = e.changedTouches[0].pageX;
    		if (this.swipeStartX - this.swipeEndX > 100) this.next();
    		if (this.swipeStartX - this.swipeEndX < -100) this.prev();
    	}
    }
    JavaScript Anonymous, Mar 17, 2019

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!