If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

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:

    Locate_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',
    				

    Locate_slides_transition_effect_in_slider_initialization

    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:

    Locate_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'
    				

    Locate_available_slider_effects_in_camera_js_file

    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:

    Copy_needed_slides_transition_effect

  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:

    Replace_one_transitions_effect_with_other

  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