Select Page

Magento Basics – Change Slider Effect – RWD 1.9

by | Apr 15, 2015 | Magento Advice | 2 comments

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.

Conor Rhys Tomkins

Conor Rhys Tomkins

Senior PHP Developer

Working with PHP applications since the age of 17. I have a wide range of knowledge on most PHP open source platforms. I must admit, my favorites are Magento & Wordpress!

Still need answers?

12 + 15 =