Як створити гарний автоматичний слайдер на jQuery
Мені дуже подобається плагін Coda Slider на jQuery. Я його часто використовую під час створення різних віджетів.
Його ж я використав під час створення цього плагіна. У ньому є головне вікно з вмістом (панелі), яке прокручується вліво або вправо та відображає різний контент. Зазвичай кількість панелей встановлено спочатку, але код написаний таким чином, що видалення або додавання нових панелей не складе труднощів. Також є посилання знизу, за допомогою яких можна перейти будь-яку панель. Ці посилання можуть мати будь-який зовнішній вигляд (гіперлінки, картинки тощо) і вони ведуть різні панелі. За це відповідає плагін CODA SLIDER.
Натисніть на зображення або демо-посилання під ним, щоб переглянути плагін у дії.
Демо версія знаходиться тут
Завантажити весь скрипт можна тут
Ще для фінального результату необхідно:
-Різні види підготовленого заздалегідь вмісту панелей. Ми можемо помістити все будь-що всередину панелей, але для полегшення завдання ми помістимо кілька форматів для початку. Головний формат - це картинка розміром з панель з текстовим описом.
-Авто програвання. Панелі будуть повільно автоматично прокручуватися, однак можна також натиснути на лінк і перейти на будь-яку панель.
-Індикатор у вигляді стрілки. Візуальним індикатором буде стрілка над маленькою картинкою, яка показує, на якій панелі зараз знаходиться слайдер.
HTML
Ось загальна структура HTML слайдера
CSS
Повний CSS код складається з простого скидання, кількох службових стилів та простої структури. Знизу Ви знайдете CSS код, який належить до слайдера, але також можна подивитися весь код тут.
Все, що починається на ".strip" безпосередньо відноситься дослайдер. Саме ці рядки коду змушують його правильно працювати. Починаючи з ".nav-thumb" і нижче, йде код, який відноситься саме для нашого прикладу (демо). Маленькі картинки мають тонкий чорний кордон.
Клас ".active-thumb" також дуже важливий. Якщо мініатюра має такий клас - він набуває спеціального тла у вигляді білої стрілки зверху, яка вказує на активну панель.
Javascript
Між тегами Вашої сторінки Вам необхідно включити jQuery та інші файли плагіна. Виглядає це так:
Цей код активує слайдер, проте нам необхідно додати ще кілька функцій, замість внесення змін до слайдера. Ми можемо додати їх написав невелику функцію трохи вище. Для досягнення ефекту автоматичного прокручування ми будемо кожні три секунди викликати натискання наступної мініатюри. Ми назвемо функцію "theinterval" і нам знадобиться кілька змінних.
Цей код йде відразу за попереднім до
Ще кілька важливих зауважень.
Чи бачите цифру "6" у нашій функції?
Вона відповідає за кількість панелей у слайдері. Якщо Ви хочете додати або прибрати панелі, необхідно змінити цю цифру.
Даний урок підготовлений для вас командою сайту.
5 останніх уроків рубрики "jQuery"
Анімація набір тексту на jQuery
Сьогодні ми хотіли б вам розповісти про бібліотеку TypeIt — безкоштовний jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна досягти дуже реалістичного ефекту.
Тимчасова шкала на jQuery
jQuery плагін для створення тимчасовоїшкали.
Малюємо діаграму Ганта
jQuery плагін для створення діаграми Ганта.
AJAX та PHP: завантаження файлу
Приклад того, як здійснити завантаження файлу через PHP і jQuery ajax.