Кроме настроек модулей в админ панели сайта, есть настройки самих скриптов, меняя которые, можно добиться интересных и полезных эффектов.
Настройка эффектов слайдера
Откройте файл 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 элемента и бесконечным повторением. Если скорость анимации не задана, то по умолчанию она будет быстрой.
Многие ищут какие-то модули для того, чтобы сделать карусель с автопрокруткой, а на самом деле достаточно только немного отредактировать файл стандартной карусели, и необходимый эффект будет достигнут.