Site Analysis
Твиты
Афоризмы
Цитаты
Новости
Analysis

OpenCart – change slideshow effect

In OpenCart 2 include jQuery library slideshow - Owl Carousel. For changed effect transition slider need editing 2 file or for OpenCart 3 - simple add option in lists options sliders. But let's start in order. 

 

Add new effect in slideshow OpenCart 2

Owl Carousel in Opencart 2 have 4 additional different transition effects:

  • "fade";
  • "backSlide";
  • "goDown";
  • "fadeUp"

 

For activations this effect need include css file "owl.transitions.css" in controller slideshow extension and edit view file slideshow extension. Use next instruction.

 

1 - Open controller slideshow extensions, path - 

catalog\controller\extension\module\slideshow.php

2 - Find this row, include base style -

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

3 - after found row, add row include "owl.transitions.css"

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

4 - open template extensions file

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

5 - add option transitionStyle in template file module

transitionStyle : "fade"

 

As a result controller Slideshow -

 

And result template Slideshow -

 

 

Don`t work "scaleUp" in Owl Carousel?

Sometimes in instruction can find effect "scaleUp", this is wrong. Use "fadeUp" instead "scaleUp".

use "fadeUp" instead ScaleUp - little wrong comment

 

OpenCart 3 change transition effect

For slideshow in OpenCart 3 use jQuery plugin Swipe. It have next animation - 

  • "slide";
  • "fade";
  • "cube";
  • "coverflow";
  • "flip".

 

For change default effect need add row in option slider which in next file

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

Sample, effect fade added in 25 row (and a comma in 24 row):

 

 

 

Tags:
1 Star2 Stars3 Stars4 Stars5 Stars6 Stars7 Stars8 Stars9 Stars10 Stars (No Ratings Yet)
Loading...

Leave a Reply