код работает в местной песочнице, но не работает на локальном сервере и на jsfiddle

Question

при клике на кнопку смена слайда происходит на миллисекунды, затем снова возвращается к первому слайду. при чем по SetInterval все работает, как нужно. в чем может быть проблема и как ее решить? ссылка 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);

.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 1

У Вас стоит вызов кнопки в теге <a> что, в свою очередь, вызывает перезагрузку страницы.
Воспользуйтесь таким решением:

    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 = function(){
        slider.next();
    }

    .slider {
        width: 768px;
        position: relative;
        padding-bottom: 20px;
    }

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

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

    .showed {
        opacity: 1;
    }

<div class="next">next</div>
<br>
<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/700x400" alt=""></div>
    <div class="slide"><img src="http://placehold.it/890x400" alt=""></div>
    <div class="slide"><img src="http://placehold.it/900x400" alt=""></div>
</div>

БЛОГ НА HUSL

код работает в местной песочнице, но не работает на локальном сервере и на jsfiddle

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