seregazolotaryow64
@seregazolotaryow64
Программист отдела интернет-маркетинга

Как правильно переключать слайдеры, программируя их без проблем?

Добрый день!
Я обращаюсь к вам по вопросу, основу которого с примерами его кода вы увидите здесь:

Но это мне надо дорабатывать и сталкиваюсь с текущими проблемами, решения которых сложно придумать:
  • Почти слайд-шоу в остальном работает, но при нажатии на кнопку "Вперёд" он не хочет переключаться с последнего на первый;
  • Так как для кнопки "Вперёд" правильно реализована математическая операция переключения слайдов, но кнопка "Назад" полностью с ней не справляется(но она должна выдерживать такую же операцию как у кнопки "Вперёд")

Если вы изучите основу с примерами её кода, то я буду рад вашим полноценным вариантам решения вопросов по перечисленным мной проблемам, с которыми вы встретите.
Но вопросы таковы:
  • Как правильно реализовать бесконечное переключение слайдеров в интерфейсе слайд-шоу?
  • Как правильно привязывать событие к кнопке "Назад", чтобы при нажатии на неё даже первый слайд переключился на последний?

Заранее вам спасибо!
  • Вопрос задан
  • 43 просмотра
Решения вопроса 1
bestowhope
@bestowhope
Печатает...
Раз уж вы знаете что такое codepen, вы не пробовали просто скачать любой, самый примитивный слайдер и посмотреть логику?

<div class="slider">
	<div class="overflow-imgs">
		<div class="line-imgs">
			<img src="https://pp.userapi.com/c830409/v830409785/1be33e/73SFiK33foM.jpg" />
			<img src="https://pp.userapi.com/c830409/v830409785/1be345/oIX93cgm34k.jpg" />
			<img src="https://pp.userapi.com/c830409/v830409785/1be34c/ApLT7ZF9qXg.jpg" />
			<img src="https://pp.userapi.com/c830409/v830409785/1be353/SjILkQiUBac.jpg" />
		</div>
	</div>
	<div class="prev arrow">Назад</div><div class="next arrow">Вперед</div>
</div>


html, body{margin: 0px 0px 0px 0px;width:  100%;}

.slider{
	width: 230px;
	margin: 20px auto 0px auto;
}

.overflow-imgs{
	width: 100px;
	height: 100px;
	margin: 0px auto 0px auto;
	overflow: hidden;
}

.line-imgs{
	width: 400px;
	position: relative;
	left: 0px;
	-webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.line-imgs > img{
	float: left;
}

.arrow{
	width: 100px;
	height: 40px;
	text-align: center;
	line-height: 37px;
	color: #fff;
	cursor: pointer;
	margin: 10px 0px 0px 0px;
	background: #2269ff;
	display: inline-block;
	position: relative;
	margin-left: 10px;
}


// http://www.cyberforum.ru/javascript-beginners/thread2334912.html



let lineImgs = document.querySelectorAll('.line-imgs')[0],
	img = lineImgs.querySelector('img'),
	i = 0;
document.querySelectorAll('.slider')[0].addEventListener('click',e => {
	if(e.target.classList.contains('next')) i == -3 ? (i = 0, lineImgs.style.left = '0px') : (i--, lineImgs.style.left = (i * img.width) + 'px');
	if(e.target.classList.contains('prev')) i == 0 ? (i = -3, lineImgs.style.left = '-300px') : (i++, lineImgs.style.left = (i * img.width) + 'px');
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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