greenfox07
@greenfox07

Как сделать слайдер на jquery без плагинов?

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

HTML

<div class="slider">
	<ul class="slider__list">
		<li class="slide active">
			<img src="img/bg/first-bg.png" alt="first-bg">
			<span class="slide__title">a v e</span>
			<button class="slide__btn btn">shop men’s collection</button>
		</li>
		<li class="slide">
			<img src="img/bg/first-bg.png" alt="first-bg">
			<span class="slide__title">a v e</span>
			<button class="slide__btn btn">shop men’s collection</button>
		</li>
		<li class="slide">
			<img src="img/bg/first-bg.png" alt="first-bg">
			<span class="slide__title">a v e</span>
			<button class="slide__btn btn">shop men’s collection</button>
		</li>
	</ul>
</div>
  • Вопрос задан
  • 166 просмотров
Пригласить эксперта
Ответы на вопрос 2
mannaro
@mannaro Куратор тега JavaScript
Умею профессионально гуглить
Ну как. Скрываются все слайды, потом показывается первый. Потом скрывается и показывается второй. И так по кругу.
Ответ написан
Комментировать
Destell
@Destell
React, React Native junior developer
Самый простой вариант, который пришел на ум - заюзать setTimeout или цикл. Не обдумывая разработку перелистывания для себя так точно не скажу, не дорос еще.

Получаем позицию блока-родителя (.slider), размером, например 400х400, получаем позицию активного слайда (.slide .active) аналогичного размера (чтобы проще было воспринимать), смещаем полосу (.slider__list) со слайдами на эту позицию. Все это в сет таймаут (рекурсивный), сеттаймер или цикл, но это мысли навскидку.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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