Перетаскиваемое слайд-шоу в двух вариантах

Экспериментальное слайд-шоу, страницы которого можно перетаскивать мышкой и у которого есть два варианта просмотра: полноэкранный и режим маленькой карусели. В полноэкранном режиме связанное содержание может быть просмотрено.

Сегодня мы хотели бы поделиться с вами экспериментальным слайд-шоу. Идея основана на великой концепции навигации с сайта Wild, где можно посмотреть проекты в полноэкранном режиме или в режиме карусели. Существуют различные методы, которые подошли бы для такого макета; мы попытались воссоздать этот слайд-шоу концепт с помощью библиотеки Dragdealer.js и 3D-преобразования.

Основная идея заключается в переводе ползунка по оси Z, что позволяет ему быть либо в полноэкранном, либо в меньшего размера карусели. При переключении фактического размера слайд-шоу и удаления преобразования, когда они больше не нужны, мы позволяем слайд-шоу иметь «реальный» размер (то есть 25% от окна). За части содержания, мы скользим вверх и выявляем области прокрутки.

Пожалуйста, обратите внимание, что это слайд-шоу является экспериментальным, и работает правильно только в современных браузерах.
Изображения используемые в демо взяты из Unsplash.com.
Когда слайд-шоу загружен, мы покажем на этом начальном этапе некоторую информацию о том что он показывает, и какие возможности взаимодействия существуют:

Основным видом слайд-шоу является полноэкранный режим. Это единственный режим который показывают мобильные устройства:

При нажатии на кнопку со стрелкой, содержание будет раскрыто скользящим переходом:

При нажатии на кнопку переключателя вида, слайд-шоу будет «уменьшено» до меньшей версии:

Обратите внимание, что на момент выпуска, Firefox (30,0, Mac и Windows) были худшими браузерами с проблемами вокруг 3D-преобразования, анимации и переходов. Хотя мы пытались исправить все проблемы, некоторые эффекты могут работать некорректно.
Надеемся, вам понравится этот эксперимент и вы найдете его вдохновляющим!

Источник урока: http://tympanus.net/codrops/2014/06/26/draggable-dual-view-slideshow

Перевел для сайта wordpress-club.com: Александр Овчаренко