Вращение изображения на 360 градусов

ИСХОДНИКИ   ДЕМО

 

Давайте рассмотрим как можно создать красивый вращающийся слайдер вашего продукта с помощью простого jQuery плагина 360slider. Он настраивается  с помощью ряда опций и позволяет показать картинку под любым углом в развертке 360 градусов. Такой въювер будет отлично смотреться в различных магазинах, так как посетитель сможет увидеть товар с любого ракурса.

 

Особенности

  • Плавная анимация
  • Выбор опций и параметров
  • Взаимодействие с API
  • Простое взаимодействие с мышью
  • Настройка поведения
  • Поддержка устройств с тачем
  • Простое подключение
  • Никакой Flash анимации
  • Интеграция с плагинами

Плагины

 

Пример


JavaScript

 

HTML снипет

 

Таким образом мы запустили слайдер для product1. Конструктор классов нуждается в конфигурации таких параметров как totalFrame, endFrame и currentFrame

 

Документация


Функции

Функции  для контроля анимации слайдера.

Функция Описание
.play() Запуск авто прокрутки слайдера
.stop() Остановка слайдера
.next() Прокрутка к следующему кадру
.previous() Возврат к предыдущему кадру
.gotoAndPlay() Переход к определенному кадру
 
 
 
 
 

Конфигурация

Список настроек которые мы можете свободно менять, дабы придать своему слайдеру нужный вид.

Настройка Стандартное значение Тип Описание
totalFrames 180 Number Задает общее количество кадров
currentFrame 1 Number С какого кадра следует начинать анимацию
endFrame 180 Number На каком кадре заканчивается анимация
framerate 60 Number Частота кадров в секунду
filePrefix » String Префикс для файлов изображений (для nike_boot_1.png filePrefix будет nike_boot_)
ext png String Расширение файла
height 300 Number Задает высоту контейнера слайдера
width 300 Number Задает ширину контейнера слайдера
style {} Object Стили jQuery.css({})
navigation true Boolean если вы не хотите показывать элементы управления, поставьте — false
autoplayDirection 1 Number Установка направления прокрутки 1 or -1
drag true Boolean false — если вы хотите отключит прокрутку с помощью мыши или тача
disableSpin false Boolean Отключение анимации загрузки
zeroPadding false Boolean true добавит нулевой отступ для имен файлов 1 — 9
responsive false Boolean включение адаптивности для слайдера
onReady function() {} Function Триггер оповещения о загрузке всех картинок
playSpeed 100 Number Контроль скорости вращения (в мс) при нажатии Play

Этот плагин поддерживается абсолютно всеми браузерами, включая «всеми любимый» IE6

 

Источник: https://github.com/creativeaura/threesixty-slider

 

Роман Головчук

Создатель и куратор InfoStarve

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *