JS Animated. Как изменить скорость, эффекты перехода и другие опции слайдера Camera

Мы с гордостью представляем новый видео туториал о Camera Slideshow, популярном плагине jQuery, который часто используется нашими разработчиками шаблонов в качестве слайдера.

Иногда возникает желание поэкспериментировать с анимацией слайдера. В данном туториале мы проведем краткий обзор некоторых опций и свойств скрипта Camera slideshow, таких как автозапуск, скорость и еффекты перехода между слайдами.

Итак, откроем файл camera.js из папки "site/js" текстовым/кодовым редактором, например Notepad++, и начнем редактирование!

ВНИМАНИЕ: некоторые опции, которые вы найдете в файле camera.js, могут быть не активны в вашем шаблоне. Это зависит от конкретной разметки страницы, применяемых правил CSS, скриптов, и т.п.

Автоматический запуск

autoAdvance — данная опция определяет, будет ли слайдшоу начинаться автоматически.

Чтобы включить автоматический запуск, используйте:

autoAdvance = true;

Чтобы его отключить, пропишите следующее:

autoAdvance = false;

Скорость

Существуют 2 настройки скорости слайдера: time (время) и transPeriod (период перехода).

time — определяет период времени между сменой слайдов. Другими словами, это количество времени показа каждого слайда в миллисекундах.

transPeriod — длительность эффекта перехода в миллисекундах.

Пример:

time: 7000,
transPeriod: 2000,

При данном коде слайды будут показываться 7 секунд, а смена слайдов будет длиться 2 секунды.

Эффекты перехода

Используйте опцию fx, чтобы изменить, добавить или убрать эффект перехода.

Чтобы объединить эффекты, разделяйте названия через запятые.

Пример:

fx: 'simpleFade, mosaic',

Данный код случайно будет применять эффект simpleFade (выцветание) или mosaic (мозаика) при смене слайдов.

Количество рядов/колонок

Некоторые эффекты, например mosaic, используют 2 опции для количества рядов и колонок.

Пример:

cols: 6,
rows: 4,

Чтобы узнать больше свойств и примеров, прочтите комментарии внутри файла camera.js или посетите сайт разработчиков Camera slideshow.

Спасибо за внимание. Пожалуйста, оцените данную статью и обращайтесь к нам с любыми вопросами.

Вы также можете посмотреть детальный видео туториал: