Слайдер зображень на jquery без плагінів

Відео: Створення слайдера за допомогою плагінів jQuery

Однією з найпопулярніших завдань, які робляться на jQuery, є створення плагіна зображень. У мене на сайті служби підтримки є якраз такою слайдер. Я створював цей слайдер зображень з перемикачами без плагінів. І його код в цій статті я зараз наведу.

Для початку розберемо HTML-код:

id="Container"gt; 
id="Slider"gt; 
 Тема слайдера 
id="Course_1"class="Show"gt; 
href="Http://srs.myrusakov.ru/kurs"gt; 
alt="Створення та Розкрутка сайту від А до Я"src="Images / kurs-cover.jpg"/ Gt; 
 
/ Gt; 
href="Http://srs.myrusakov.ru/kurs"gt;Створення та Розкрутка сайту від А до Я 
 
id="Course_2"gt; 
href="Http://srs.myrusakov.ru/makeup"gt; 
alt="Верстка сайту з нуля"src="Images / makeup-cover.jpg"/ Gt; 
 
/ Gt; 
href="Http://srs.myrusakov.ru/makeup"gt;Верстка сайту з нуля 
 
id="Course_3"gt; 
href="Http://srs.myrusakov.ru/php"gt; 
alt="PHP і MySQL з Нулі до Гуру"src="Images / php-cover.jpg"/ Gt; 
 
/ Gt; 
href="Http://srs.myrusakov.ru/makeup"gt;PHP і MySQL з Нулі до Гуру 
 
 
id="Switch"gt; 
data-number="1"alt="Перемикач"src="Images / slider_on.jpg"/ Gt; 
data-number="2"alt="Перемикач"src="Images / slider_off.jpg"/ Gt; 
data-number="3"alt="Перемикач"src="Images / slider_off.jpg"/ Gt;

Думаю, що принцип потягніть: є основний блок container, який містить блок slider і switch. Останній зберігає перемикачі. А slider містить блоки, які по-черзі будуть показуватися користувачеві. Усередині цих блоків вже може бути, взагалі кажучи, будь-який контент.

тепер додамо CSS:

#container { 
 text-align: center- 
 width:300px- 
} 
#slider div { 
 opacity:0- 
 position: absolute- 
} 
#slider div.show { 
 opacity:1- 
 z-index:100- 
} 
#switch { 
 margin-top:360px- 
} 
#switch img { 
 cursor: pointer- 
} 
#slider img { 
 width:300px- 
}

По суті, даний CSS-код розміщує блоки один під одним. Роблячи їх повністю прозорими. А єдиний блок, який буде видимим, робиться непрозорим, а також розміщений завжди поверх інших. Все інше, думаю, зрозуміло.

Відео: Створення слайдера картинок | Owl Carousel плагін jQuery

І, нарешті, залишився код jаvascript:

Код я прокоментував досить докладно, проте, можливо, не дуже зрозуміло, навіщо виключати таймер, а після його відразу включати. Відповідь проста - скинути затримку. Припустимо, таймер пропрацював 3 секунди і через 2 секунди він повинен змінити блок. Користувач в цей момент клацає по перемикачу, поки там все зміниться, залишиться до спрацьовування таймера приблизно 1 секунда. Тобто користувач не встиг кликнути, а таймер йому вже включає наступний блок. Тоді як логічно, щоб при зміні блоку, таймер знову чекав 5 секунд до наступної автоматичної зміни.

Ось такий не дуже складний скрипт, але в той же час досить функціональний і красивий. А метою даної статті є демонстрація Вам того, що далеко не завжди потрібно вдаватися до плагінів. Подібний слайдер зображень можна було зробити і за допомогою плагіна, тільки ось коду було б раз в 50 більше (через коду плагіна, зрозуміло), плюс Ви не змогли б вносити дрібні зміни.

Отже, використовувати плагіни варто тільки для складних завдань, а для простих - краще написати все самому.

Поділися в соціальних мережах:

Схожі