Сьогодні хочу розповісти як зробити ефектну самопрокручівающуюся стрічку зображень. Вона виглядає як банери з автосменой. Може, ви захочете розмістити таким чином посилання на спецпропозиції в магазині або посилання на останні пости? Як би там не було, я навчу як це робити. Це дуже легко.
Що нам знадобиться
І все. Де взяти jQuery я думаю, всі знають. А jcarousel Lite я нагугліть за вас. Я довго шукав плагін, який дозволить мені швидко і без проблем, без гігантських обсягів коду і хитрих премудростей зробити такий простий ефект. І я знайшов його і дуже радий цьому. Фактично, цей пост я пишу ще й для себе, як закладку, щоб заглянути сюди коли наступного разу потрібно зробити галерею зображень з автоскроллом.
Пишемо html для стрічки зображень
Тут класика. Використовуємо список ul й обертаються його в div. На цей див ми будемо нацьковувати плагін, так що йому потрібен ідентифікатор. У моєму випадку це клас.
Важливо щоб зображення були одного розміру. Інакше буде виглядати не так ефектно. Тому доведеться напружитися і обробити їх.
Потрібно підключити jQuery. Як це зробити, думаю, всі знають. А ще потрібно підключити бібліотеку jcarousel Lite. Вона все і робить.
Після завантаження сторінки, потрібно нацькувати плагін на нашу стрічку зображень і станеться диво!
Це все! Реально. Більше нічого не потрібно. Не потрібно підключати і налаштовувати теми. Не потрібно робити якісь контроли і писати додатковий код. У вас є стандартний код списку зображень і єдиний виклик плагіна з параметрами. Це так, як повинно бути. Я в захваті, якщо чесно.
Про можливі параметри і їх значення можна прочитати в оригіналі на сторінці плагіна. Ну а я коротко переведу вам що навіщо.
Можливі параметри галереї
btnPrev - ідентифікатор, що визначає кнопку "Назад". Це потрібно якщо ви робите управління прокруткою за допомогою кнопок.
btnNext - ідентифікатор для кнопки "Вперед".
btnGo - ви можете зробити перехід за номерами елементів. При кліці на якийсь елемент, карусель повинна бути проскроллена на певний ітем. Детальніше написано в документації.
mouseWheel - true / false значення, що визначає чи буде карусель прокручуватися від скролла мишки. Вимагає плагін mousewheel.
auto - true / false значення, що визначає чи буде стрічка крутитися сама.
speed - швидкість прокрутки в мілісекундах.
easing - ефект прокрутки. Можна зробити ефект підстрибування. Вимагає плагіна easing.
vertical - може потрібно, щоб картинки крутились вертикально?
circular - чи буде стрічка зупинятися після досягнення останньої картинки або буде крутитися по колу?
visible - скільки елементів видно
start - з якого елементу починати
scroll - по скільки елементів прокручується
beforeStart - callBack функція, викликає до початку анімації
afterEnd - callBack функція, викликає в кінці анімації
Такі справи. Користуйтеся!
А я закінчив конкурс на блозі фаната футболок і скоро напишу про нього звіт.