Видео-слайдер

Видео-слайдер — модуль для OpenCart и ocStore 3.x

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

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

Для кого

Для магазинов, которым есть что показать в движении: одежда на модели, мебель в интерьере, техника в работе, процесс производства. Короткий ролик рассказывает о товаре быстрее, чем несколько фотографий.

Свои ролики и ролики с видеохостингов

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

• Свой файл mp4 или webm играет как живой фон: без звука, сам, по кругу или до конца ролика.
• Файл загружается прямо с экрана модуля кнопкой «Загрузить». Модуль проверяет тип файла и сразу показывает ограничение хостинга на размер.
• Ролик YouTube, Rutube, VK Видео или Vimeo добавляется ссылкой. На слайде видна обложка с кнопкой воспроизведения, плеер открывается по щелчку покупателя.
• До щелчка страница не обращается к видеохостингу, поэтому главная не замедляется чужими скриптами.

Удобно на телефоне

Для мобильных экранов у каждого слайда свой выбор.

• Показать тот же ролик.
• Показать отдельный вертикальный ролик — он заполняет экран телефона без обрезки.
• Показать только картинку-обложку, чтобы сберечь мобильный трафик покупателя.

Слайды листаются пальцем вбок, а прокрутка страницы вверх и вниз работает как обычно. Страница не уезжает вбок даже у слайдера во всю ширину экрана.

Текст и кнопка на слайде

На каждом слайде можно разместить подзаголовок, заголовок, короткий текст и кнопку со ссылкой. Тексты заполняются на всех языках магазина.

• Девять вариантов расположения текста: слева, по центру или справа, вверху, посередине или внизу.
• Затемнение под текстом в три степени и выбор светлого или тёмного текста — надпись читается на любом видео.
• Ссылка без кнопки делает ссылкой весь слайд.

Вид и поведение

• Ширина по контейнеру темы или от края до края окна.
• Своя высота для компьютера, планшета и телефона: несколько пропорций кадра или высота всего экрана.
• Смена слайдов растворением или сдвигом — когда ролик доиграл или через заданное время.
• Стрелки, точки, кнопка паузы и кнопка звука включаются отдельно.

Скорость загрузки страницы

Модуль бережёт скорость главной. Сначала покупатель видит обложку, ролик запускается после загрузки страницы. Загружается только ролик текущего слайда, остальные ждут своей очереди. Когда слайдер уходит с экрана или вкладка браузера скрыта, видео встаёт на паузу.

Доступность

Если покупатель включил в системе уменьшение движения или экономию трафика, ролики сами не запускаются: видна обложка, а запустить видео можно кнопкой. Кнопки слайдера подписаны для экранного диктора, слайды листаются стрелками клавиатуры.

Работа с темами

Модуль подходит к стандартной теме и не меняет файлы магазина. Шрифт, акцентный цвет и скругления он берёт у темы «Чистая линия», если она установлена. В этой теме слайдер выводится через блок модулей макета на главной.

Руководство с примерами настройки открывается вкладкой прямо на экране модуля.

Посмотрите модуль в работе

Видео работы слайдера и подробная демонстрация — 32 секунды с тремя роликами. Открыть живое демо магазина.