Want to add a content carousel to your Magento based store? In this post I’ll explain how to set your Magento store to work with jQuery 1.4.3 and install a jQuery Carousel script for rotating content on any Magento page.

If you’re designing a store in Magento one of the bug-bears for me has always been getting jQuery goodies to play happily alongside all the standard Magento Javascript frameworks. I’ve tried a few times to fudge it when in a hurry but finally got the time to figure how it should be done properly. Here’s how…

This was done on v1.4.1.1 of Magento, using jQuery 1.4.3

1. Download the latest version of jQuery.

2. Open the file in a text editor and add the following line to the the very end:

 jQuery.noConflict(); 

3. Save the jQuery file file as ‘jQuery-1.4.3.js’ in the js/jquery/ folder of your Magento store.

4. Download the brilliant Infinite Carousel 2 from CatchMyFame (this is the script that will do the sliding content), save the JS file as ‘jquery.infinitecarousel2.js’ and upload that and the ‘images’ folder into the js/jquery/ folder of your Magento store.

5. Open app/{your skin}/{your skin}/layout/page.xml. Around line 50, in the first block of ‘addJs’ calls add the following 2 lines after all the others in that section:

6. In the Magento Admin/backend go to CMS, Pages (or static blocks if you want a Carousel in a static block) and choose the page you want to add the carousel. For this script the Carousel images must live with a DIV with an id of ‘carousel’. Therefore, enter something like this:



Note: the paths to the images may be different on your store. I saved my Carousel images in the skin directory and then the sub-folder of slider/images/. If you want yours elsewhere, change the paths accordingly. Be sure to amend the width and height dimensions to suit also.

7. That’s it! Save that CMS page, load up the relevant page of your store and you should have a lovely content Carousel working in Magento and powered by jQuery.

Learn to use CSS effectively, 'Enduring CSS' is out now

Get $5 off HERE ↠

Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp