Настройка эффектов слайдера и карусели в Opencart 1.5.x


Настройка эффектов слайдера и карусели в Opencart 1.5.x

Кроме настроек модулей в админ панели сайта, есть настройки самих скриптов, меняя которые, можно добиться интересных и полезных эффектов.

Настройка эффектов слайдера

 

Откройте файл catalog/view/theme/ваша-тема/template/module/slider.tpl. Код в файле можно условно разделить на две части: код отображения самого слайдера — все, что находится внутри блока <div class=»slideshow»>, и вторая часть — присоединение jquery скрипта, которое начинается со строки <script type=»text/javascript»>. Редактировать код будем как раз во второй части.

 

Код слайдера с эффектами выглядит так:

Выбираем нужные эффекты и добавляем внутрь скобок .nivoSlider(); Не забудьте внутрь круглых скобок поставить фигурные { } иначе слайдер не будет работать.

 

Эффекты:

 

effect: ‘random’, // эффект анимации слайдера, полный список приведен ниже

slices: 15, // количество анимированных элементов, например, количество квадратов для эффекта sliceDown и прочих

animSpeed: 500, // скорость смены изображений

pauseTime: 3000, // пауза между изображениями

startSlide: 0, // номер изображения, с которого начинать показ изображений, отсчет ведется с 0, то есть 0 — это первое изображение.

directionNav: true, // true — отобразить стрелки вперед-назад, false — скрыть

directionNavHide: true, // true — показывать стрелки только при наведении, false — показывать всегда

controlNav: true, // true — показать кнопки переключения слайдов, false — скрыть

keyboardNav: true, // использовать стрелки влево и вправо на клавиатуре для переключения слайдов.

pauseOnHover: true, // остановка анимации при наведении мыши.

 

Значения для effect:

 

sliceDown

sliceDownLeft

sliceUp

sliceUpLeft

sliceUpDown

sliceUpDownLeft

fold

fade

random

slideInRight

slideInLeft

boxRandom

boxRain

boxRainReverse

boxRainGrow

boxRainGrowReverse

 

Описывать эффекты не буду, их можно посмотреть, подставляя нужное значение в код.

 

Настройка эффектов карусели

 

Редактируется в файле catalog/view/theme/ваша-тема/template/module/carousel.tpl, структура кода в файле такая же, как и у слайдера. Эффектов у карусели меньше, но они тоже могут быть полезны. Изначально скрипт карусели выглядит так:

Как видите, некоторые эффекты уже есть, например, vertical: false означает, что карусель будет отображаться в горизонтальном положении, если же установить это значение в true, то она отобразится вертикально. Visible — количество элементов, видимое в карусели, это значение задается из админ панели в настройках модуля Карусель. Scroll также задается в панели управления сайтом и определяет, на сколько элементов будет прокручиваться карусель. Теперь рассмотрим другие эффекты, которые можно добавить карусели.

 

animation: ‘slow’, // скорость прокрутки элементов. Возможны значения «slow»,»fast», 0 (без анимации)

auto: 0, // задает интервал автопрокрутки карусели, если стоит значение 0, то автопрокрутка отключена. Если вы хотите сделать карусель с автопрокруткой, обязательно укажите это значение.

wrap: ‘circular’, // определяет поведение карусели по достижении последнего элемента. Могут быть значения ‘last’, ‘first’, ‘both’, ‘circular’. Значение circular позволяет бесконечно прокручивать элементы.

 

Скрипт карусели с установленными эффектами:

В данном примере у карусели будет автопрокрутка с шагом в 2 элемента и бесконечным повторением. Если скорость анимации не задана, то по умолчанию она будет быстрой.

 

Многие ищут какие-то модули для того, чтобы сделать карусель с автопрокруткой, а на самом деле достаточно только немного отредактировать файл стандартной карусели, и необходимый эффект будет достигнут.

Источник: asterial.ru

Previous Кнопка для сайта с дополнительной информацией
Next Руководство по кастомным типам записей WordPress + спец плагин

Suggested Posts

Как убрать смотреть все в подкатегориях

45+ бесплатных материалов для веб дизайнеров за август 2016

Batch Editor — пакетное редактирование товаров v0.4.8

Создаем портфолио с помощью WordPress плагина Projects от WooThemes

Самые распространенные СЕО ошибки

Модуль авторизации через социальные сети