Якщо поверхні ресурсу катастрофічно не вистачає, а показати людям є що, то потрібно копати вглиб. Або просто прокрутити цю поверхню. В такій ситуації і потрібно слайдер для сайту:

Що таке слайдер

Слайдер являє собою певну ділянку дизайну сторінки, на якому в автоматичному, ручному або змішаному режимі відбувається зміна картинок. Також в якості вмісту слайдерів для сайту можуть виступати текстовий або медійний контент.

У звичайний слайдер вшито 5-7 почергово змінюються картинок. Найчастіше зміна графічних об’єктів ініціюється дією користувача. Зустрічаються гібридні зразки, що поєднують в собі ручний і автоматичний режим перемикання.

Слайдери можуть володіти різною структурою користувальницького інтерфейсу. В якості перемикачів можуть використовуватися кнопки, посилання або чекбокси. Зміна картинок може супроводжуватися повільним згасанням прозорості, частковим перекриттям зображень та іншими візуальними ефектами:

Створюємо свій слайдер для сайту

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

З точки зору психології, візуальне представлення товару у декількох ракурсах у багато разів збільшує ймовірність покупки:

Створюємо свій слайдер для сайту

Деякі спеціалізовані конструктори сайтів надають користувачам на вибір кілька версій слайдерів для створюваних шаблонів. Одним з найпопулярніших сервісів Рунета є ucoz. В залежності від призначення ресурсу шаблон конструктора комплектується певним типом слайдера.

Кілька слайдерів, популярних в мережі:

  • Tilted Content Slideshow – крутий слайдер, виводить всі зображення у випадковому порядку з ефектом 3D анімації:

Створюємо свій слайдер для сайту

  • Anything Slider – дозволяє відображати у своєму вікні не тільки картинки, але і відео, що транслюється через програвач:

Створюємо свій слайдер для сайту

  • Morphing Devices – слайдер з ефектом морфінга зображень. При цьому один малюнок повільно перетікає (трансформується) в інший. Два останніх виводяться зображення можна повертати:

Створюємо свій слайдер для сайту

На чому пишуться слайдери?

По архітектурі побудови слайдер розташовується ближче всього до веб-додатком, робота якого здійснюється на клієнтській машині. Скрипт слайдера завантажується браузером разом з основним кодом сторінки. Стиль може задаватися в межах коду. Але найчастіше характеристики зовнішнього виду встановлюються з допомогою каскадних таблиць стилів (CSS).

Побудова внутрішнього механізму слайдера відбувається на одній з мов програмування. Найчастіше використовується javascript. Для більш повного розуміння процесу створення слайдера розглянемо приклад його реалізації:

var locations = new Array(«content-1/images/1.jpg»,»img/2.jpg»,»img/3.jpg»,»img/4.jpg»,»img/5.jpg» );
var currentImage = 0;
function nextImage() {
currentImage++;
if (currentImage == locations.length)
currentImage = 0;
document.images[«picture»].src = locations[currentImage];
return false;
}
Створюємо свій слайдер для сайту

Наступне зображення
Створюємо свій слайдер для сайту

Механізм зміни зображення в коді цього простого прикладу задається за допомогою javascript. Спочатку методом Array () створюється новий масив. В дужках задаються елементи масиву (зображення). Після нього йде ініціалізація глобальної змінної currentImage.

Весь механізм зміни зображень всередині слайдера укладений у функції function nextImage(). Всередині її тіла значенню змінної currentImage кожен раз після виклику функції додається 1. Потім її значення порівнюється з довгою масиву (locations.length). Якщо довжина масиву дорівнює змінної, то показ зображень починається з першого елемента.

Рядком скрипта document.images[«picture»].src = locations[currentImage] через об’єктну модель документа відбувається звернення до джерела малюнка. Значенням currentImage встановлюється, який з малюнків буде відображений. Перегортання слайдера здійснюється натисканням на посилання з допомогою події onclick.

Посилання можна легко поміняти на html кнопку:

Створюємо свій слайдер для сайту

Більш широкими можливостями володіє бібліотека jquery. Вона включає в себе класи, що дозволяють полегшити процес розробки і збільшити функціональність слайдера.

Ось приклад каруселі на її основі. Зміна картинок відбувається автоматично:

#carousel{
width:500px;
height:300px;
overflow-x:hidden;
border: 4px double #33CCFF;
}
#track{
width:2500px;
position:relative;
}
#track div{
width:500px;
height:300px;
float:left;
position:relative;
}
div.red{
background-image:url(content-1/images/1.jpg);
}
div.blue{
background-image:url(img/2.jpg);
}
div.yellow{
background-image:url(img/3.jpg);
}
div.green{
background-image:url(img/4.jpg);
}
div.white{
background-image:url(img/5.jpg);
}
$(function(){
var width = $(‘#track div’).width();
function carousel(){
$(‘#track’).delay(1000).animate({right: ‘+=’ + width},1000, function(){
var first = $(‘#track div:first-child’);
first.remove();
$(this).append(first);
$(this).css({right: ‘-=’ + width});
carousel();
});
}
carousel();
});
Створюємо свій слайдер для сайту

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

У всесвітній павутині легко знайти безліч ресурсів, з яких можна завантажити вже готовий код просунутої каруселі.

Вирішення питання

Перед тим, як зробити слайдер на сайті, об’єктивно оцініть свої можливості. Якщо практичних навичок в веб-програмуванні явно недостатньо, то краще піти шляхом меншого опору. Тобто, використовувати вже готове рішення.

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