Creating your own responsive slider in Magento 1.9 RWD theme using the in-built slider in CMS page

RWD theme is the Magento’s first step in responsive web design and development. The theme offers a lot of responsive and multi-device adaptive features.HTML 5 and CSS3 is used to make this possible and with its’ introduction, the rwd theme is taken to next level. After installing the Magento you will notice that Home page, which is a CMS page, contains a beautiful responsive slider. This slider can be used anywhere else on the CMS pages. Here in this article, we are going one more step forward by implementing this responsive slider in non-CMS pages i.e. anywhere and if required, everywhere on our e-commerce site.

At first take a look at the home page under CMS pages in Magento Admin.Go to CMS>Pages>Madison Island and check the content. We can see the following code:

<div class="slideshow-container">
                <ul class="slideshow">
                                <li><a href="{{config path="web/secure/base_url"}}accessories/eyewear.html"><img src="{{media url="wysiwyg/slide-1.jpg"}}" alt="An eye for detail - Click to Shop Eye Wear" /></a></li>
                                <li><a href="{{config path="web/secure/base_url"}}women.html"><img src="{{media url="wysiwyg/slide-2.jpg"}}" alt="Style solutions - covet-worthy styles in travel-friendly fabrics - Click to Shop Woman" /></a></li>
                                <li><a href="{{config path="web/secure/base_url"}}men.html"><img src="{{media url="wysiwyg/slide-3.jpg"}}" alt="Wing man - hit the runway in stylish separates and casuals - Click to Shop Man" /></a></li>
        </ul>
<div class="slideshow-pager">&nbsp;</div>
<span>&nbsp;</span> <span class="slideshow-next">&nbsp;</span></div>

PHTML file contains both the script, which is PHP code and HTML code. Usually the output of .phtml file will be an html code which will be a part of our website. Copy the code described in the above paragraph and paste it into the new phtml file created in a text editor. We can see cms directives {{ }} in the code of responsive slider which will not work in our phtml file and we need to change that.CMS pages are used here to get the url/uri of the required html pages. For that purpose, we can use PHP script. We need to get the base url and media url of the magento for that we can use the magento functions:

Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA)
Mage::getBaseUrl()

After storing the base url and media url to a variable they can be called instead of the cms directives. Our phtml file can be modified as:

<?php   
    $base_url=Mage::getBaseUrl();
    $media_url=Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);
?>
 
<div>
                <ul class="slideshow">
               <?php echo '<li><a href="'.$base_url.'accessories/eyewear.html"><img src="'.$media_url.'wysiwyg/slide-1.jpg" alt="An eye for detail - Click to Shop Eye Wear" /></a></li>'; ?>
               <?php echo '<li><a href="'.$base_url.'women.html"><img src="'.$media_url.'wysiwyg/slide-2.jpg" alt="Style solutions - covet-worthy styles in travel-friendly fabrics - Click to Shop Woman" /></a></li>'; ?>    
               <?php echo '<li><a href="'.$base_url.'men.html"><img src="'.$media_url.'wysiwyg/slide-3.jpg" alt="Wing man - hit the runway in stylish separates and casuals - Click to Shop Man" /></a></li>'; ?>
        </ul>
<div class="slideshow-pager">&nbsp;</div>
<span class="slideshow-prev">&nbsp;</span> <span class="slideshow-next">&nbsp;</span></div>

Important: Please check syntax before copy –pasting.

Now our template file is ready. Save it under ../design/../page/ folder giving a name slider.phtml or the name you like.
After that, call the slider.phtml in any xml file like page.xml under any references or block as shown below:

Now clear the cache and look for changes. We can see a beautiful responsive slider in our e-commerce site.
Thank you for reading and Please share your valuable comments.