Анализ сайта
Твиты
Афоризмы
Цитаты
Новости
Анализировать

OpenCart – настраиваем эффекты перехода для модуля слайдшоу

В последних версиях OpenCart 2 и OcStore несколько урезан функционал слайдера. Для того чтобы восстановить этот функционал необходимы не сложные манипуляции с кодом буквально в паре файлов. В OpenCart 3 и вовсе будет достаточно указать эффект слайдшоу в одном файле.

 

Настраиваем смену картинок слайдшоу Owl Carousel в OpenCart 2 и OcStore

Эффект смены картинок (баннеров) в стандартном модуле слайдшоу второго опенкарта только один - "пролистывание". Однако использующийся в версиях OpenCart 2 и свежих версиях OcStore 2, плагин owl Carousel, способен несколько на большие. Так среди доступных анимаций, есть следующие эффекты: 

  • "fade" - прозрачное растворение;
  • "backSlide" - перед переключением, слайды отъезжают на второй план.
  • "goDown" - новый слайд падает сверху. 
  • "fadeUp" - увеличение с растворением (именно fadeUp, иногда в документации ошибочно пишут "scaleUp")

Эти анимации не будут работать если в контролере слайдшоу не подключен CSS файл переходов. Местонахождение файла переходов Owl Carousel в OpenCart 2 и OcStore:

catalog\view\javascript\jquery\owl-carousel\owl.transitions.css

Для того чтобы задействовать дополнительную анимацию необходимо:

1 - Перейти в контролер слайдшоу, который находиться в

catalog\controller\extension\module\slideshow.php

2 - найти строку с подключением стилевого файла Owl Carousel -

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');

3 - после найденной строки добавить подключение файла эффектов перехода:

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');

4 - перeйти в видовой файл слайдшоу

\catalog\view\theme\default\template\extension\module\slideshow.tpl

5 - добавить опцию перехода в настройки слайдера, например "fade" для затемнения:

transitionStyle : "fade"

Не забудьте в 5 пункте, поставить запятую у предыдущей опции 

Файл контроллера слайдшоу для OpenCart 2 и OcStore в итоге должен выглядеть так:

 

Видовой файл слайдшоу Owl Carousel в OpenCart 2 должен выглядеть так:

 

 

Почему не работает "scaleUp" в Owl Carousel?

Принцип подключения эффектов перехода в Owl Carousel виден из картинке ниже. К название эффекта перехода добавляются префиксы CSS классов анимаций, а потом применяются к слайдеру. Но в документации иногда ошибочно приписывают эффект "scaleUp", вместо "fadeUp", ввиду того, что даже в оригинальном архиве с CSS файлами перехода в комментариях допущена ошибка и вместо "fadeUp" написано "scaleUp". Сейчас сайт с официальной документацией не функционирует (будьте осторожны, так как домен с оф. документацией перенаправляет на вредоносные сайты), поэтому в различных инструкциях в сети создалась небольшая путаница. В любом случае вы можете открыть свой CSS файл переходов ("owl.transitions.css") и посмотреть какие классы переходов там есть.

 

 

Как изменить эффект смены картинок в банере/слайдшоу в OpenCart 3?

Здесь немного проще, так как в OpenCart 3 используется слайдер jQuery Swiper и дополнительно подключать ничего не придется. Слайдер имеет следующие эффекты перехода (смены картинок) в слайдшоу: 

  •  "slide" - перелистывание, включено по умолчанию;
  • "fade" - затемнение;
  • "cube" - псевдо 3d вращения слайдера с эфектом куба;
  • "coverflow"  - перелистывание с уменьшением предыдущего слайда;
  • "flip" - 3d вращение вокруг центра.

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

catalog\view\theme\default\template\extension\module\slideshow.twig

Для того чтобы добавить эффект затемнения при смене картинки, используйте анимацию "fade":

effect: 'fade'

После добавления эффекта необходимо сбросить кэш модификаторов в админке OpenCart и сбросить кэш в вашем браузере (в большинстве случаев - Ctrl-R).

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

На 24 строке поставили запятую после опции "loop:true" и добавили на 25 строку эффект перехода "fade".

 

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

 

Tags:
1 Star2 Stars3 Stars4 Stars5 Stars6 Stars7 Stars8 Stars9 Stars10 Stars (No Ratings Yet)
Загрузка...

Добавить комментарий