The slider code placed in the content field of the home_page_header_block static block (Magento Backend: CMS->Static blocks-> home_page_header_block)

Js files:
[MAGENTO_DIR] / skin / frontend / default / [YOUR_THEME] / js / cycle-fade-effect.js
[MAGENTO_DIR] / skin / frontend / default / [YOUR_THEME] / js / jquery.standardSlider.js

Layout Update XML

The jQuery slider HTML code

Don't forget ro replace "URL1", "URL2", "WIDTH", "HEIGHT" with your values.

{baseWidth: 1200, baseHeight: 330} is basic dimensions of images are required for the correct scaling slider resizing the browser window.

Each child element:

becomes a "slide". Copy and paste!

Code examples

Full-width Magento theme jQuery slider (placed in the home_page_header_block)

Lightshop Green theme jQuery slider, Lightshop Pink theme jQuery slider, Perfect White theme jQuery slider, RTL Magento template slider (placed in the home_page_header_block), Health and Beauty theme jQuery slider (placed in the home page content field)

This is a step-by-step guide on how to specify jQuery slider settings in our Magento themes without Slider Magento extension.

Back

Go to contentsBack to previous page