Робимо простий слайдер наjQuery, Heaven Web

слайдер

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

Отже, які особливості нашого слайдера на jQuery (я назвав HWSlider) можна відзначити?

  • Простота використання та оформлення – я хотів створити простий сценарій без наворотів, тому я не використовував анімації на CSS3, а код вийшов дуже універсальним та зрозумілим.
  • Можливість вставляти в слайди як зображення, і будь-який HTML – код.
  • Можливість прокручувати слайди як у порядку (вперед - назад), і вибирати кожен слайд (1,2,3,4…)
  • Посилання, що автоматично формуються (попередній – наступний, і з номерами слайдів). Вам потрібно лише вставити потрібну кількість div-ів, а все інше розрахується саме. Ну і можна відзначити, що кількість слайдів необмежена.

Скрипт сумісний з усіма сучасними браузерами: IE, Opera, Firefox, Safari, Chrome (т.к. слайдер не використовує CSS3).

Почнемо з HTML розмітки. У потрібне місце HTML сторінки або шаблону потрібно вставити.

Тут все просто, як видно, ви можете вставляти скільки завгодно слайдів шляхом створення нових div-ів. Всередину їх можна вставляти будь-який HTML код, наприклад картинку або блок з текстом. Не забудьте тільки підключити саму бібліотеку на jQuery разом зі всіма js - скриптами. Якщо не знаєте, як, дивіться в прикладі.

Далі розглянемо CSS. Це розмітка стилів для нашого jQuery – слайдера. Вставте код, наведений нижче у файл стилів (css - файл) вашого сайту або теми.

Давайте розберемо йогоДетальніше. Спочатку ми даємо основному блоку з ідентифікатором slider-wrap, потрібну ширину. Так як в нього вставляються всі інші блоки, то висоту можна не ставити, вона залежатиме від того, що буде всередині. Потім нам потрібно задати розміри контейнера, в якому будуть знаходитися слайди. Це – #slider. Задамо йому ширину і висоту, а також, наприклад, кордон 10 пікселів. Тут ширина – 640px це менше ніж ширина батька, тому що ми додаємо кордону шириною по 10px праворуч та ліворуч. Від ширини цього div-а залежить і ширина самих слайдів ( .slide).

І останнє: нам потрібно обов'язково задати position:relative для контейнера слайдів, оскільки слайди всередині - з абсолютним позиціонуванням. Для самих слайдів у CSS задається лише ширина та висота. Інші властивості задаються вже у jQuery скрипті.

Селектор .sli-links це блок, в якому будуть кнопки переходу на необхідний слайд. Ці кнопки являють собою прості елементи виду номер , які вставляються в необхідній кількості автоматично, разом з їхнім батьком .sli-links. Для кнопок ми задаємо красивий вигляд, а саме робимо кожну кнопку квадратної, вирівнюємо їх усі по центру, а також завдяки overflow:hidden і text-indent:-9999px, прибираємо текст, залишаючи тільки фонові іконки, які так само змінюються при наведенні цей елемент курсора. Для зручності я використав спрайти, що зменшило кількість зображень.

Далі оформляється активна кнопка. Просто змінюємо положення тла. Потім переоформимо посилання для переходу на слайди, що здійснює і попередній. Ви можете дати їм будь-яке оформлення, як і кнопкам. Ці посилання вставляються автоматично всередину #slider. Але щоб їх було видно, я поставив їм абсолютне позиціонування та верхній шар (z-index:3), щоб вони буливідображено над слайдами. Думаю з CSS тут все зрозуміло і просто: ви можете змінити майже всі характеристики, щоб оформити слайдер так, як вам потрібно.

Давайте тепер розглянемо сценарій:

Далі ми встановлюємо необхідні CSS властивості для слайдів за допомогою .css(). Блоки зі слайдами ми накладаємо один на одного, використовуючи абсолютне позиціонування, потім приховуємо їх усі .hide(), а потім показуємо лише перший. Змінна slideNum – це номер активного слайда, тобто лічильник.

Основна логіка роботи нашого jQuery слайдера – це функція animSlide. Вона приймає один параметр. Якщо ми передамо до неї рядки "next" або "prew", то спрацюють умовні оператори і буде відображено відповідно наступний або попередній слайд. Якщо ж ми пошлемо як значення цифру, то це число стане активним слайдом і він буде показаний.

Таким чином, ця функція приховує поточний div, вираховує новий і показує його.

Зауважте, що методу .fadeIn(), який робить видимим активний слайд, заданий другий аргумент. Це так звана функція зворотного виклику. Вона виконується, коли слайд з'явиться повністю. В даному випадку це зроблено для забезпечення автоматичного прокручування слайдів. Функція rotator, визначена нижче, знову викликає функцію animSlide для переходу на наступний слайд через необхідний нам інтервал часу: ми отримаємо замикання, що забезпечує постійне прокручування.

Все працює нормально, але нам потрібно зупинити виконання автоматики, якщо користувач підводить курсор до слайдера або натискає кнопки. Для цього створено змінну pause. Якщо її значення позитивно – true, значить автоматичного перемикання не буде. За допомогою методу .hover() ми вказуємо: очистити таймер якщо він запущений -clearTimeout(sl >

Додатково нам потрібно створити нові елементи на сторінці та помістити їх у потрібне місце. Використовуючи цикл each() для кожного слайду (div-а з класом .slide), створимо елемент span усередині якого буде число - номер слайда. Це число використовується у функції анімації для переходу до слайду з цим номером. Обернемо все в div з потрібними класами, і в результаті отримаємо таку розмітку:

Потім якщо в налаштуваннях зазначено, що посилання "наступний - попередній" потрібні, то створимо і їх, і відразу повісимо на них обробники. Як обробник кліка використовуємо ту ж саму функцію animSlide, з аргументами "next" і "prew".

Здавалося б, навіщо ми створюємо розмітку всередині скрипту, а не в HTML-коді? Справа в тому, що наприклад, якщо у користувача відключені скрипти - він не побачить елементів, які не працюватимуть, і це не введе його в замішання. Крім того, спрощується код, що непогано для SEO.

У результаті розмітка слайдера буде виглядати приблизно так (як слайди я використовував зображення, і встановив 5 штук):

Нижче ви можете подивитися, як працює наш jQuery слайдер на демо сторінці, і скачати всі необхідні вихідні записи.

Насамкінець, кілька моментів про інтеграцію цього слайдера з Drupal. Ви можете додати цей код у файл шаблону, наприклад, page.tpl.php, і прикріпити скрипт окремими js-файлом до теми. Jquery Drupal включений за замовчуванням, але працює в режимі сумісності (докладніше). Є два варіанти доопрацювання. Або обернути весь js код:

або замінити символи $ у всьому скрипті на jQuery. Ось так:

У прикладі вже реалізовано перший метод.

Додано: Це ще не все. Читайте наступну статтю про HWSlider. Там ми додамо нові можливості до цього скрипту.