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

Вы удивитесь, но магии тут никакой нет. Все очень просто и в тоже время напряжно для реализации. Суть очень проста, мы создаем N-число картинок которые будут появляться одна за другой, что и будет создавать эффект 3D вращения.

И так, давайте установим данный скрипт. Для начала нам нужно написать начальную разметку: 

Html

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


Теперь нам нужно инициализировать и запустить слайдер: 

JS

Код
window.onload = init;

var product;
function init(){

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

Методы

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

.play() - Запуск авто прокрутки слайдера
.stop() - Остановка слайдера
.next() - Прокрутка слайдера на следующий кадр
.previous() - Прокрутка слайдера на предыдущий кадр
.gotoAndPlay() -Переход на определённый кадр.

  • FalleN

  • 5322

  • 1

  • 345

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!