Бібліотека jquery: слайдери для вашого сайту
З плином часу і розвитком технологій в області веб-дизайну змінюються і потреби / вимоги користувачів до вмісту сайтів. Якщо раніше це був переважно текстовий контент з невеликою кількістю тематичних картинок, то сьогодні переважаючою є саме графічна складова. Вона дозволяє в стислі терміни отримати максимум потрібної і корисної інформації, а не витрачати час на читання довгих текстів. У зв`язку з цим все більш популярним і, більш того, необхідним елементом веб-сторінок стають слайдери. Вони являють собою блоки з мінливим в них контентом - від зображень до посилань. Сучасний спосіб додавання даного веб-об`єкта - використання бібліотеки JQuery. Слайдери, створені за допомогою даного інструменту, виходять зручними, простими у використанні, та й виглядають досить ефектно. Далі ми розглянемо, як зробити ці елементи веб-сторінки самостійно. Завдяки чималій кількості стандартизованих засобів, з`являється можливість реалізовувати JQuery-слайдери різних типів і різноманітного наповнення.
Як додати слайдер на веб-сторінку?
Способів додавання слайдер-блоків на сторінку сайту кілька. Часто навіть не доводиться писати HTML-код і вникати в скрипт. Існує чимала кількість безкоштовних бібліотек, що пропонують користувачам вже готові шаблони, що дозволяють додати JQuery-слайдери на ваш сайт. Все, що від вас вимагається, - це скопіювати його в вихідний код вашої веб-сторінки і насолоджуватися результатом. Однак в даному випадку можливості реалізації ваших творчих фантазій обмежені. Тому не зайвим буде вміти створювати цей елемент дизайну самостійно. Для цього потрібно знати, як реалізується простий слайдер JQuery, а вже ускладнити його ви завжди зможете, додавши додаткові елементи в код.
Створюємо слайдер самостійно: код в HTML
Перше, з чого слід почати, - це прописати розмітку майбутнього слайдера.
- Створюємо в HTML-файлі блок Slideshow, який і буде містити всі наші слайди (картинки та ін.).
- У нього закладаємо список 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 (визначає період зміни слайдів). Таймер буде запускатися, коли сторінка сайту повністю завантажиться. До даного параметру прив`язуємо дію наведення курсору мишки на слайд (що зупиняє зміну слайдів).
Відео: Створення слайдера за допомогою плагінів jQuery
Обов`язково слід прописати довжину контейнера ul. Вона буде дорівнює кількості слайдів, помноженому на довжину кожного слайда.
Відео: 1. Адаптивний слайдер для сайту - Slick.js
Вставляємо функцію, що відповідає за зміну слайдів. Ось і все, можете перевірити роботу вашого слайдера.
висновок
У даній статті ми розглянули, як самостійно створити JQuery-слайдери для вставки на сторінку свого сайту. Використовуючи приклад реалізації простого слайдера, ви зможете придумувати свої власні варіанти його інтерпретації, вносячи відповідні зміни до початкового коду. Це дозволить вдосконалити дизайн і зробити користування вашим сайтом зручніше для відвідувачів.
