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

demosourse

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

Небольшой пример

Javascript

window.onload = init;

var product;
function init(){

    product1 = $('.product1').ThreeSixty({
        totalFrames: 72, // Общее число кадров
        endFrame: 72, // конечный кадр
        currentFrame: 1, // с какого кадра стартовать
        imgList: '.threesixty_images', // селектор изображений
        progress: '.spinner', // селектор элемента процесса загрузки
        imagePath:'assets/product1/', // путь к папке с изображениями
        filePrefix: 'ipod-', // префикс файлов
        ext: '.jpg', // формат изображения
        height: 265,
        width: 400,
        navigation: true,
        disableSpin: true
    });
}

HTML

<div class="threesixty product1">
    <div class="spinner">
        <span>0%</span>
    </div>
    <ol class="threesixty_images"></ol>
</div>

Для использования плагина создайте подобную html структуру для каждого продукта. Далее необходимо инициализировать плагин, указав настройки.

Настройки

Методы

Публичные методы для управления слайдером.

Метод Описание
.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 или -1
dragging true Boolean false, если нужно отключить реакцию на тач и события мыши.
disableSpin false Boolean Отключить блок загрузки
zeroPadding false Boolean true добавит 0px внутреннему отступу
responsive false Boolean Активация адаптивности

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.360slider.com/
Перевел: Станислав Протасевич
Урок создан: 14 Марта 2014
Просмотров: 25245
Правила перепечатки

5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^