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

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

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

 

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

 

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

<script type="text/javascript"><!--
$(document).ready(function() {
$('#slideshow<?php echo $module; ?>').nivoSlider({
effect: 'random',
slices: 15,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
directionNavHide: true,
controlNav: true,
keyboardNav: true,
pauseOnHover: true
});
});
--></script>

Выбираем нужные эффекты и добавляем внутрь скобок .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, структура кода в файле такая же, как и у слайдера. Эффектов у карусели меньше, но они тоже могут быть полезны. Изначально скрипт карусели выглядит так:

<script type="text/javascript"><!--
$('#carousel<?php echo $module; ?> ul').jcarousel({
vertical: false,
visible: <?php echo $limit; ?>,
scroll: <?php echo $scroll; ?>
});
//--></script>

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

 

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

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

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

 

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

<script type="text/javascript"><!--
$('#carousel<?php echo $module; ?> ul').jcarousel({
vertical: false,
visible: <?php echo $limit; ?>,
scroll: <?php echo $scroll; ?> ,
auto: 2,
wrap: 'circular'
});
//--></script>

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

 

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