A guide to add Apple style slideshow for Magento

This article attempts to help you set up a slideshow on a Magento ecommerce shop, inspired by the official Apple slideshow.

Before we dive into the tutorial details, take a look at the live demo on the Magento Jewelry shop or Magento Apple shop in our Premium Magneto Themes section.

If you're interested in this slideshow effect, you will definitely want to go through this tutorial article?

I will explain how the slideshow works and introduce its features. The slidehow slices right to left and it's looping in a circle. The dot icons allow you to change the slideshow image when clicked.

Download slideshow.js and put under your theme js directory: skin/frontend/[your theme]/default/js/

Download the css file slideshow.css and put under your theme css directory: skine/frontend/[your theme]/css/

Download i_slideshow-node.gif and put under skin/frontend/[your theme]/default/images/

In order to show the slideshow on homepage, in magento CMS Page manager, edit your Homepage article, update the layout by clicking on tab Design, in field Layout Update XML enter the code below:

<reference name="head">
    <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
    <action method="addCss"><stylesheet>css/slideshow.css</stylesheet></action>
</reference>

<reference name="root">
    <block type="page/html_wrapper" name="slideshow">
        <action method="setElementClass"><value>slideshow-wrapper</value></action>
        <block type="cms/block" name="cms_slideshow">
            <action method="setBlockId"><block_id>slideshow</block_id></action>
        </block>
    </block>
</reference>

The code is supposed to load slideshow.js and slideshow.css on the homepage and appends a block named slideshow into the page layout. the slideshow block's content is editable through a CMS Static Block named slideshow

Now, we have to update the main layout in order to show up slideshow block. Suppose you're using 1-column layout for the homepage, edit skin/frontend/[your theme]/default/template/page/1column.phtml. after the header block is printed out, we output slideshow block:

<?php echo $this->getChildHtml('header') ?>
<?php echo $this->getChildHtml('slideshow') ?>

Next, we will create a CMS Static blog 'identified' slideshow with content below:

<ul>
  <li><a href="/link-1"><img src="{{skin url='images/media/slideshow/1.jpg'}}" alt="" /></a></li>
  <li><a href="/link-2"><img src="{{skin url='images/media/slideshow/2.jpg'}}" alt="" /></a></li>
  <li><a href="/link-3"><img src="{{skin url='images/media/slideshow/1.jpg'}}" alt="" /></a></li>
  <li><a href="/link-4"><img src="{{skin url='images/media/slideshow/2.jpg'}}" alt="" /></a></li>
</ul>

Where {{skin url='images/media/slideshow/1.jpg'}} is a link of slideshow image. You can add many slideshow as you want.

Okay, try to refresh your homepage and see how your beautiful slideshow showed up.

Congrats! We're done. Welcome any comment :-)