кнопка для слайдера

Question

не понимаю что я делаю не так — почему не работает кнопка? причем если через SetInterval делаю всё работает ссылка на jsfiddle — https://jsfiddle.net/dglushkov/g7y5p4aj/17/

let images = document.querySelectorAll('.slider .slide '),
  nextBtn = document.querySelector('.next');

function Slider(images) {
  this.images = images;
  let i = 0;

  this.next = function() {    				
	this.images[i].classList.remove('showed');
	i++;
	if(i >= this.images.length) {
	  i = 0;
	}
	this.images[i].classList.add('showed');    				
  }
}
			
let slider = new Slider(images);

nextBtn.onclick = () => {
  slider.next();
}

/*		setInterval(function(){
			slider.next();
		}, 1000);*/

slider {
	width: 768px;
	position: relative;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
}

.slide {
	width: 100%;
	opacity: 0;
}

.showed {
	opacity: 1;
}

<a href="" class="next">next</a>
	<div class="slider">
		<div class="slide showed"><img src="http://placehold.it/600x400" alt=""></div>
		<div class="slide"><img src="http://placehold.it/590x400" alt=""></div>
		<div class="slide"><img src="http://placehold.it/600x400" alt=""></div>
		<div class="slide"><img src="http://placehold.it/590x400" alt=""></div>
		<div class="slide"><img src="http://placehold.it/600x400" alt=""></div>
	</div>

Answer 1

Хз, всё работает. Я твой же код вставил в местный редактор и завёл. Кнопка next внизу.

let images = document.querySelectorAll('.slider .slide '),
					nextBtn = document.querySelector('.next');

		function Slider(images) {
			this.images = images;
			let i = 0;

			this.next = function() {
				
				this.images[i].classList.remove('showed');
				i++;
				
				if(i >= this.images.length) {
					i = 0;
				}

				this.images[i].classList.add('showed');
				
			}

		}
			
		let slider = new Slider(images);

		nextBtn.onclick = () => {
			slider.next();
		}

//		setInterval(function(){
//			slider.next();
//		}, 1000);

.wr {
  position: relative;
}
slider {
	width: 768px;
	position: relative;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
}

.slide {
	width: 100%;
	opacity: 0;
}

.showed {
	opacity: 1;
}

.next {
position: relative;
top: 410px;
  z-index: 1000;
}

<div class="wr">
<a href="#" class="next">next</a>

	<div class="slider">
		<div class="slide showed"><img src="http://placehold.it/600x400" alt=""></div>
		<div class="slide"><img src="http://placehold.it/590x400" alt=""></div>
		<div class="slide"><img src="http://placehold.it/600x400" alt=""></div>
		<div class="slide"><img src="http://placehold.it/590x400" alt=""></div>
		<div class="slide"><img src="http://placehold.it/600x400" alt=""></div>
	</div>
 </div>

Answer 2

Попробуйте вот так:

let slider = new Slider(images);

        nextBtn.onclick = function(){
            slider.next();
            return false;
        }

Answer 3

Здесь для ссылки <a class="next">Next</a> нужно задать preventDefault, потому как по умолчанию клик по ссылке обновляет страницу

БЛОГ НА HUSL

кнопка для слайдера

Ответы (3 шт):