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

Question

[greenfox07]

Как написать на 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>

Answer 1

[Александр Вульф]

Ну как. Скрываются все слайды, потом показывается первый. Потом скрывается и показывается второй. И так по кругу.

Answer 2

[Destell]

Самый простой вариант, который пришел на ум - заюзать setTimeout или цикл. Не обдумывая разработку перелистывания для себя так точно не скажу, не дорос еще.

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