597 jQuery плагин Threesixty нужен для создания слайдера, представляющего какой-либо продут на все 360 градусов. Этот плагин очень хорошо настраивается, так как у него достаточно много опций.
И так, с помощью Threesixty вы сможете показать продукт под любым углом, сможете его повернуть или запустить анимацию предпросмотра. Такой слайдер хорошо подойдет для магазинов или каталогов, где продукты, нужно показывать со всех сторон.
Запуск
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
window.onload = init; var car; function init(){ car = $('.car').ThreeSixty({ totalFrames: 52, // Количество изображений для слайдера endFrame: 52, // последний фрейм в анимации currentFrame: 1, // Текущий фрейм при загрузке imgList: '.threesixty_images', // селектор для списка изображений progress: '.spinner', // селектор для индикатора процесса imagePath:'assets/car/', // путь к изображениям filePrefix: '', // префикс, если есть ext: '.png', // расширения для изображений height: 1000, width: 447, navigation: true }); } |
HTML сниппет
|
1 2 3 4 5 6 |
<div class="threesixty car"> <div class="spinner"> <span>0%</span> </div> <ol class="threesixty_images"></ol> </div> |
В примере мы создали слайдер для модели машины. Для его инициализации понадобился объект конфигурации со свойствами totalFrame, endFrame и currentFrame
