OpenCart 2.x. How to change slides transition effect

This tutorial provides an explanation of how to change slides transition effect in OpenCart 2.x.

OpenCart 2.x. How to change slides transition effect

In order to change slides transition effect, you should perform the following steps:

1. Log into your Control Hosting Panel (cPanel) on your server.

2. Locate the File Manager and go to your website folder (you can perform the next steps via your FTP as well).

3. Navigate to catalog/view/theme/themeXXX/template/module and open tm_slideshow.tpl file:

   

4. You should locate this code at the top of the file (approximately line 18):

   					<script>
   						jQuery(function(){
   							jQuery('#camera_wrap_<?php echo $module; ?>').camera({
   								navigation: true,
   								playPause: false,
   								thumbnails: false,
   								navigationHover: false,
   								barPosition: 'top',
   								loader: false,
   								time: 3000,
   								transPeriod:800,
   								alignment: 'center',
   								autoAdvance: true,
   								mobileAutoAdvance: true,
   								barDirection: 'leftToRight', 
   								barPosition: 'bottom',
   								easing: 'easeInOutExpo',
   								fx: 'simpleFade',
   								height: '36.09%',
   								minHeight: '90px',
   								hover: true,
   								pagination: false,
   								loaderColor			: '#1f1f1f', 
   								loaderBgColor		: 'transparent',
   								loaderOpacity		: 1,
   								loaderPadding		: 0,
   								loaderStroke		: 3,
   							});
   						});
   					</script>
   				

   You will need to edit this line:

   					fx: 'simpleFade',
   				

   

   By looking at this line of code, you can define that slider is using simpleFade transition effect now.

5. In order to change simpleFade to another effect, you should navigate to catalog/view/javascript/camera and open camera.js file:

   

6. You need to locate the following line (approximately line 23):

   					fx : 'random', //'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight'
   					   //you can also use more than one effect, just separate them with commas: 'simpleFade, scrollRight, scrollBottom'
   				

   

   This line of code specifies the available effects (random, simpleFade, curtainTopLeft, etc.) you can use.

   Please visit the official Camera Slideshow website to find more details.

7. Let’s change slides transition effect to curtainBottomRight one. In order to do it, you need to copy curtainBottomRight value from the previous line in camera.js file:

   

8. Once you have copied it, go back to tm_slideshow.tpl file in catalog/view/theme/themeXXX/template/module.

9. You need to replace simpleFade value with curtainBottomRight one:

   

10. Save your changes and refresh your website to see them.

Now you know how to change slides transition effect in OpenCart 2.x.

Feel free to check the detailed video tutorial below:

OpenCart 2.x. How to change slides transition effect