Modify Homepage Slideshow Transition

Hi,

How can I modify the slideshow.tpl file to change the slideshow transition effect on homepage?

Thank you!

OC's Slideshow version (OwlCarousel) is deprecated, if you want fancy efects you have to do more than edit that file, and include the new files + change the slideshow.tpl settings.

http://owlcarousel.owlgraphic.com/

Ok thanks...Is there any walkthrough on how to make the changes?

Not that I know of, but I might update the Mod I made 2 months ago to include the latest Carousel version.

Great! Thank you. If you can, please let me know...

Add:

to your catalog/controller/module/slideshow.php

under then open view/theme/module/slideshop.php

Add: example:

Tried it and it does not work...the slider just dissapear.

Thanks anyway!

csmith81487 wrote: Add:

Code: Select all

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

to your catalog/controller/module/slideshow.php

under

Code: Select all

$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');

then open view/theme/module/slideshop.php

Add:

Code: Select all

transitionStyle : "fadeUp"

example:

Code: Select all

$('#slideshow<?php echo $module; ?>').owlCarousel({
 items: 6,
 autoPlay: 5000,
 singleItem: true,
 navigation: true,
 navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
 pagination: true,
 transitionStyle : "fadeUp"
});

Tried this, and it works!!! thanks alot.

YES IT WORKS!!!!! THANK YOU!!!

Thanks it works for me... are there other transition styles which we can use.. i have tried following effects but none of them is working except "fadeUp".

Styles I have tried: 'random', 'simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight' ?