Завантажити бібліотеку можна за посиланням.
Подивитися демо можна за посиланням.
Наведу відразу код і почнемо розбирати.
Опишу, що ж робить скрипт. Сам скрипт нескладний. У нас, скажімо, є який-небудь елемент (див напрмер) і в ньому список картинок.
Див (або інший елемент) може мати клас, але обов'язково повинен мати свій ід, щоб потім ми скрипту могли передати його, щоб створити слайд шоу. Скрипт дозволяє створювати як горизонтальне так і вертикальне слайд шоу з рухом вгору або вниз, а також вправо або вліво відповідно. Ми так само можемо задавати розмір слайд шоу по ширині і висоті, а так само швидкість прокрутки картинок. Є параметр установки максимальної ширини або висоти картинки в пікселях. Якщо ці параметри не задані, то скрипт використовує значення за замовчуванням.
Приклади використання бібліотеки.
Мінімальний необхідний виклик
Ми просто передаємо ВД необхідного елемента, який містить картинки для слайд шоу. Інші параметри задаються в самому скрипті.
Приклад, що використовує параметри
Алгоритм скрипта.
Отримуємо список картинок і формуємо два списки картинок. Розраховуємо необхідні розміри для контейнера і для анімації. І змінюємо стилі left, right, top, bottom position соответсвенно в setInterval.
Як підключити бібліотеку
В head ми підключаємо js файл бібліотеки і css слайд шоу
необхідно робити на подію onload для body, тому що нам необхідно, щоб завантажився не тільки DOM, а й картинки.