Бібліотека JQuery: слайдери для вашого сайту

З плином часу і розвитком технологій в області веб-дизайну змінюються і потреби / вимоги користувачів до вмісту сайтів. Якщо раніше це був переважно текстовий контент з невеликою кількістю тематичних картинок, то сьогодні переважаючою є саме графічна складова. Вона дозволяє в стислі терміни отримати максимум потрібної і корисної інформації, а не витрачати час на читання довгих текстів. У зв`язку з цим все більш популярним і, більше того, необхідним елементом веб-сторінок стають слайдери. Вони являють собою блоки з мінливим в них контентом - від зображень до посилань. Сучасний спосіб додавання даного веб-об`єкта - використання бібліотеки JQuery. Слайдери, створені за допомогою даного інструменту, виходять зручними, простими у використанні, та й виглядають досить ефектно. Далі ми розглянемо, як зробити ці елементи веб-сторінки самостійно. Завдяки досить великій кількості стандартизованих засобів, з`являється можливість реалізовувати JQuery-слайдери різних типів і різноманітного наповнення.

Як додати слайдер на веб-сторінку?

Способів додавання слайдер-блоків на сторінку сайту декілька. Часто навіть не доводиться писати HTML-код і вникати в скрипт. Існує чимала кількість безкоштовних бібліотек, що пропонують користувачам вже готові шаблони, що дозволяють додати JQuery-слайдери на ваш сайт. Все, що від вас вимагається, - це скопіювати його у вихідний код вашої веб-сторінки і насолоджуватися результатом. Проте в даному випадку можливості реалізації ваших творчих фантазій обмежені. Тому незайвим буде вміти створювати цей елемент дизайну самостійно. Для цього потрібно знати, як реалізується простий слайдер JQuery, а вже ускладнити його ви завжди зможете, додавши додаткові елементи в код.

Створюємо слайдер самостійно: код в HTML

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

1. Створюємо в HTML-файлі блок Slideshow, який і буде містити всі наші слайди (картинки та ін.).
2. У нього закладаємо список ul, кожен пункт якого буде зберігати окремий слайд.

Працюємо в CSS

Далі застосовуємо до нього потрібні характеристики стилю, використовуючи CSS-документ. Це необхідно, щоб зверстаний нами слайдер контенту JQuery працював коректно і мав потрібний вид. На даному етапі перед нами стоять наступні завдання:

• зробити так, щоб в блоці Slideshow відображався тільки один, потрібний зараз слайд (картинка або контент), а інші були скрити;
• розташувати слайди один за одним (зліва направо) ;
• зробити ul-контейнер, в якому зберігаються слайди, рухливим (вліво і вправо).

Для цього задаємо в CSS-файлі наступні параметри:

• для Slideshow: overflow-x - scroll, overflow-y - hidden:
• для ul: float - left.

Також можна задати параметри ширини (width), висоти (height), фону (background) та ін.

Прописуємо код в JQuery

В HTML і CSS всі необхідні зміни внесені. Залишилася справа за кодом JQuery, слайдери в якому повинні мати наступні параметри:

• слайди повинні змінювати один одного з певним інтервалом часу;
• при наведенні курсора мишки їх рух повинен припинятися.

Для цього оголошуємо дві змінні: slidewidth (дорівнює довжині слайда) і slidertime (визначає період зміни слайдів). Таймер буде запускатися, коли сторінка сайту повністю завантажиться. До даного параметру прив`язуємо дію наведення курсору мишки на слайд (що зупиняє зміну слайдів).

Обов`язково слід прописати довжину контейнера ul. Вона буде дорівнює кількості слайдів, помноженому на довжину кожного слайда.

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

Висновок

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