The new banner slider that comes packaged with the release of Magento 1.9 and above is smooth and optimised, but offers little backend customisation.

The slide effect it uses may not suit your store. I was recently asked by a customer to change their banner slider to a fade transition in their 1.9 Magento.

The banner slider script packed with Magento 1.9 is actually easily customisation & simple to change the slider effect. Using a script called Cycle2 – by Malsup.

View more Cycle2 documentation.

How To Change Slider effect

1. Open:

skin/frontend/rwd/YOUR_THEME/js/slideshow.js

a. If this file does not exist make a copy from your rwd theme

skin/frontend/rwd/default/js/slideshow.js

(Creating a sub theme is recommended so any future upgrade of Magento does not overwrite your changes.)

2. You will see the following code

$j(document).ready(function () {

// ==============================================
// UI Pattern – Slideshow
// ==============================================

$j(‘.slideshow-container .slideshow’)
.cycle({
slides: ‘> li’,
pager: ‘.slideshow-pager’,
pagerTemplate: ”,
speed: 600,
pauseOnHover: true,
swipe: true,
prev: ‘.slideshow-prev’,
next: ‘.slideshow-next’,
fx: ‘scrollHorz’
});
});

3. Change ‘scrollHorz’ in fx.

‘fade’ = A smooth fade transition
‘scrollHorz’ = Smooth horizontal scroll

4. Save your edit & refresh your cache.