Site 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 - 


2 - Find this row, include base style -


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


4 - open template extensions file


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


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




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

Leave a Reply