@Error420

Как сделать слайдер?

Делаю слайдер с прокруткой. Поставил за функцией счетчик и прописал в функции чтобы при каждом нажатии на кнопку Next число в нем уменьшалось на 800px . Срабатывает только один раз ,хотя при выводе значения в счетчика в консоль показывает что он отрабатывает нормально ,но почему то в margin-left значение записывается только один раз

<style>
	.slider_five{
		width: 800px;
		overflow: hidden;
	}

	.slider_five_box{
		/* width: calc(800 * 4); */
		height: 500px;
		display: flex;
		margin-left: 0;
	}

	.navigation_five{
		display: flex;
		justify-content: space-between;
		width: ;
		font-size: 40px;
		cursor: pointer;
		width: 100%;
}



</style>

<h2>ПРОКРУТКА СЛАЙДОВ</h2>
<div class="slider_five">
	<div class="slider_five_box">
		<img src="https://i2.wp.com/alextheatrestk.com.au/wp-content/uploads/2019/08/800-x-500.jpg?fit=800%2C500&ssl=1" alt="" class="slide_five">
		<img src="https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/19/2019/07/cleaner-wax-works-well-on-dirty-and-ligh_325551132_578263542-800x-500.jpg" alt="" class="slide_five">
		<img src="http://www.passenger6a.ru/wp-content/uploads/2016/05/001_DESTACADAa-800x500.jpg" alt="" class="slide_five">
		<img src="http://innotechnews.com/images/gadgets/Huawei/honor-view-20/honor-view-20.jpg" alt="" class="slide_five">
	</div>
	<div class="navigation_five">
		<div class="prev_five">Prev</div>
		<div class="next_five">Next</div>
	</div>
</div>

<script>
	var count_width = 0;
	document.querySelector('.next_five').onclick = function(){
		count_width += -800;
		console.log(count_width);
		var slider_five_box = document.querySelector('.slider_five_box');
		slider_five_box.style.marginLeft += count_width + 'px';
	}
</script>
  • Вопрос задан
  • 183 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы