8 Квітень 2016
Рубрика: уроки

Слайдер на jQuery з автоматичною прокруткою

Іноді написати слайдер для зображень самому значно простіше, аніж шукати готовий. Я хочу поділитись з вами рецептом, як створити простий і швидкий слайдер зображень для вашого сайту за 10 хвилин. Об’єм коду — менш ніж 2 Кб, до того ж тут є автоматична прокрутка. Поїхали робити слайдер!

Колись я вирішив, що ще один слайдер інтернетові не завадить, тож і поділився з вами своїм самописним скриптом. Нічого складного, просте перекручування слайдів і автоматичне меню в нижній частині. Як виявилось, охочих поставити собі таку крутилку було досить багато. А мало не кожен п’ятий з них просив мене зробити автоматичну прокрутку.

Моя думка така: слайдер має прокручуватись виключно за бажанням користувача. І тому будь-яка анімація на сторінці без його відома (те ж стосується автопрогравання відео і звуку) — є хамством щодо відвідувача.

Але ще більше хамство — ігнорувати прохання, тож будь ласка, ось вам рецепт, як зробити автоматичну прокрутку в моєму слайдері.

Автоматична прокрутка

Для початку подивіться, як працює слайдер. Всі налаштування і код я взяв з попереднього уроку і доправював його, для зручності викладу тут код окремо. Його буде достатньо для створення нового слайдеру як з анімацією, так і без неї. Тож, поїхали.

Підключіть jQuery

Бажано, найсвіжішу версію:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Додайте HTML слайдера

Для прикладу візьмемо п’ять однакових за розмірами зображень, кожне має бути в окремому елементі списку:

<div class="slider">
 <ul>
 <li><img src="i/1.jpg" alt=""></li>
 <li><img src="i/2.jpg" alt=""></li>
 <li><img src="i/3.jpg" alt=""></li>
 <li><img src="i/4.jpg" alt=""></li>
 <li><img src="i/5.jpg" alt=""></li>
 </ul>
</div>

В CSS треба додати стилі, які будуть використовуватись для оформлення. Ну, ви й самі все знаєте:

<style type="text/css">
 .slider {
 z-index: 9;
 width: 700px;
 height: 290px;
 overflow: hidden;
 margin: 0 0 7px;
 position: relative;
 }
 .slider ul,
 .slider li {
 padding: 0;
 margin: 0;
 list-style-type: none;
 }
 .slider ul {
 width: 9999px; 
 }
 .slider ul li {
 list-style-type: none;
 float: left;
 width: 700px;
 height: 290px;
 }
 .slider .nav {
 position: absolute;
 left: 15px;
 bottom: 12px; 
 }
 .slider .nav span {
 opacity: 0.9;
 background: #fff;
 margin: 0 8px 0 0;
 width: 16px;
 height: 16px;
 border-radius: 8px;
 cursor: pointer;
 overflow: hidden;
 display: block;
 float: left;
 box-shadow: 0 1px 2px #000;
 }
 .slider .nav span.on {
 background: #2e9419;
 }
</style>

А тепер найцікавіше, сам JS:

<script type="text/javascript">
 $(document).ready(function() {
 $(".slider").each(function() {

 var repeats = 5, // кількість повторювань автоматичного прокручування
 interval = 1, // інтервал в секундах
 repeat = true, // чи треба автоматично прокручувати (true/false)
 slider = $(this),
 repeatCount = 0,
 elements = $(slider).find("li").length;

 $(slider)
 .append("<div class='nav'></div>")
 .find("li").each(function() {
 $(slider).find(".nav").append("<span data-slide='"+$(this).index()+"'></span>");
 $(this).attr("data-slide", $(this).index());
 })
 .end()
 .find("span").first().addClass("on");

 // add timeout

 if (repeat) {
 repeat = setInterval(function() {
 if (repeatCount >= repeats - 1) {
 window.clearInterval(repeat);
 }

 var index = $(slider).find('.on').data("slide"),
 nextIndex = index + 1 < elements ? index + 1 : 0;

 sliderJS(nextIndex, slider);

 repeatCount += 1;
 }, interval * 1000);
 }

 });
 });

function sliderJS(index, slider) { // slide
 var ul = $(slider).find("ul"),
 bl = $(slider).find("li[data-slide=" + index + "]"),
 step = $(bl).width();

 $(slider)
 .find("span").removeClass("on")
 .end()
 .find("span[data-slide=" + index + "]").addClass("on");

 $(ul).animate({
 marginLeft: "-" + step * index
 }, 500);
}

$(document).on("click", ".slider .nav span", function(e) { // slider click navigate
 e.preventDefault();
 var slider = $(this).closest(".slider"),
 index = $(this).data("slide");

 sliderJS(index, slider);
});
</script>

Далі трохи поясню.

Налаштування

Блок з налаштуваннями виглядає так:

 var repeats = 5, // кількість повторювань автоматичного прокручування
 interval = 1, // інтервал в секундах
 repeat = true, // чи треба автоматично прокручувати (true/false)
 slider = $(this),
 repeatCount = 0,
 elements = $(slider).find("li").length;

Якщо вам не потрібна автоматична прокрутка, призначайте repeat = false, останні налаштування будуть проігноровані.

Нагадаю: за замовчуванням розмір блоку 700 х 290 пікселів, його можна міняти як завгодно. Не забудьте після цього також оновити CSS.

Подивитись і скачати

Тепер я хочу бачити коментарі 10