Блог

Я хочу создать слайдер с кнопками, и я не могу понять, как мне это сделать. Когда я нажимаю правую кнопку, она сдвигает 2 страницы, затем показывает пробел, и думает, что проблема связана с функцией arrowRight. Если кто-нибудь знает, почему мой код не работает, пожалуйста, объясните мне.

 //FOR SLIDER    



let sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    current = 0;

function reset() {
    for (let i = 0; i < sliderImages.length; i  ) {
        sliderImages[i].style.display = 'none';
    }
}

function startSlide() {
    reset();
    sliderImages[0].style.display = 'block';
}
startSlide();

function slideLeft() {
    reset();
    sliderImages[current - 1].style.display = 'block';
    current--
}

arrowLeft.addEventListener('click', function () {
    if (current === 0) {
        current = sliderImages.length;
    }
    slideLeft();
})

function slideRight() {
    reset();
    sliderImages[current   1].style.display = 'block';
    current  
}
arrowRight.addEventListener('click', function () {
    if (current === sliderImages.length) {
        current = 0;
    }
    slideRight();
})
  

Я не думаю, что ваш метод идеально подходит для этой задачи. Обычно это два контейнера — один для видимой части, другой заполнен изображениями. Это будет выглядеть примерно так:

 const sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    container = document.querySelector(".container");

document.addEventListener("DOMContentLoaded", function() {
	container.style.width = 100 * sliderImages.length   "%";
	sliderImages.forEach((el) => {
		el.style.width = 100 / sliderImages.length   "%";
	})

	startSlider()
});	

function startSlider() {

	let pos = 0;

	arrowLeft.addEventListener("click", slideLeft)
	arrowRight.addEventListener("click", slideRight)

	function slideLeft() {
		if(pos === 0) {
			pos = sliderImages.length - 1;
		} else{
			pos--;
		}

		slide()
	}

	function slideRight() {
		if(pos === sliderImages.length - 1) {
			pos = 0;
		} else {
			pos  ;
		}
		slide()
	}

	function slide() {
		$(container).animate({left: -100 * pos   "%"}, 500)
	}
}  

 *{
		padding: 0;
		margin: 0;
	}

	body{
		width: 100%;
	}

	.outer-container {
		width: 80%;
		margin: 5px auto;
		overflow: hidden;
		position: relative;
	}

	.slide > img {
		width: 100%;
	}
	
	.container {
		display: flex;
		position: relative;
	}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-container">
 <div id="arrow-left">LEFT</div>
 <div id="arrow-right">RIGHT</div>
 <div class="container">
  <div class="slide">
  	<img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;w=1000amp;q=80">
  </div>
  <div class="slide">
  	<img src="https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg">
  </div>
  <div class="slide">
  	<img src="https://media.boingboing.net/wp-content/uploads/2019/02/cats.jpg">
  </div>
  <div class="slide">
  	<img src="https://cdn-images-1.medium.com/max/1600/1*mONNI1lG9VuiqovpnYqicA.jpeg">
  </div>
 </div>

</div>  

Если вы просто исправляете свой код, вот что я изменил:

 arrowRight.addEventListener('click', function () {
    //Make sure that's current less than the number of images
    if (current   1 == sliderImages.length) {
        current = 0;
    } else {
        current  ;
    }
    slide();
})
//Moved checks and current position management from slide
//Functions to click listeners
arrowLeft.addEventListener('click', function () {
    if (current === 0) {
        current = sliderImages.length - 1;
    } else {
        current--;
    }
    slide();
})
//That let me merge your two function into one
//And your checks for positions was a little off
function slide(){
    reset();
    sliderImages[current].style.display = 'block';
}
  

Я надеюсь, что мой ответ помог вам. Если у вас есть какие-либо вопросы об этом коде, добавьте комментарий ниже.