Custom Magento Theme – Part 4

Part 4 – Modifying the homepage image slider

The rwd theme comes with cycle2.js compatibility built in, you simply need to add a ul list with a class of slideshow and the cycle2 will turn this into a javascript slider processing each li as a separate slide. Which is both good and easy to implement, the cycle2 slider also has a wide range of customisable options, in which I will still want to retain the initial slideshow option but will also be using this for other functions later on, so I will be keeping this as part of my child theme but adding slick.js for another option of a javascript image slider.

rwd custom image slider compare

My plan is to have the banner slider area be 100% of the width of the screen, with each slide image being centered, but either side showing the next and previous images. The textual content of the page will still be centered.

In the original 1column layout the whole page was centered, I will be using the previously created custom homepage to achieve this effect.

For the image slider I decided to incorporate a third party slider named ‘slick’ – the default rwd theme already contains a slider named cycle2 in which I will leave this functionality within this template for other uses. Both these sliders are able to be used without any conflict.

Downloading slick

This can be downloaded from slick, once downloaded, extract into:

skin/frontend/{your-package-name}/{your-theme-name}/js
for exmaple
\skin\frontend\rwd-custom\default\js

Then you need to add the references to page.xml so that the files are loaded, here you can either add them for a specific page or to the default layout so they are loaded on most pages.

app/design/frontend/{your-package-name}/{your-theme-name}/layout/page.xml

Find the section where the other JavaScript files are added and add the following (change file location to match your own)

<action method="addItem"><type>skin_js</type><name>js/lib/slick/slick.min.js</name></action>
<action method="addItem"><type>skin_css</type><name>js/lib/slick/slick.css</name></action>
<action method="addItem"><type>skin_css</type><name>js/lib/slick/slick-theme.css</name></action

Upload all the modified files and when you view your website in a browser, look at the source code to check that the files are loaded and accessible.

Creating the slide-show

Within the Magento admin area CMS > Pages > Home page > Content

To create the slide-show, slick looks for any class with the name slickshow, then any child divs it will use as each slide.

<div class="slideshow-container">
     <div class="slickshow">

          <div><a href="#"><img alt="Slider 1" src="{{media url="wysiwyg/homepage_banners/pick-and-mix-hire.jpg"}}" width="1200" /></a></div>
          <div><a href="#"><img alt="Slider 2" src="{{media url="wysiwyg/homepage_banners/christmas-gift-ideas.jpg"}}"  width="1200" /></a></div>
          <div><a href="#"><img alt="Slider 3" src="{{media url="wysiwyg/homepage_banners/candy-floss-machine-hire.jpg"}}" alt="" /></a></div>
          <div><a href="#"><img alt=""Slider 4 src="{{media url="wysiwyg/homepage_banners/american-sweets.jpg"}}" alt="" /></a></div>

     </div><!-- .slickshow -->
</div><!-- .slideshow-container -->

Slickshow customisation

Slick.js is a powerful slide-show allowing for many different set-ups, below is the configuration I ended upon, this is stored within a JavaScript that is loaded on the homepage.

Which contains various breakpoints for different screen sizes

        $j('.slickshow').slick({
        centerMode: true,
        centerPadding: '60px',
        slidesToShow: 1,
        autoplay:true,
        variableWidth: true,
        dots: true,
        infinite: true,
        speed: 3000,
        arrows:false,
        mobileFirst: true,
        responsive: [
        {
          breakpoint: 1200,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 1
          }
        },
        {
          breakpoint: 980,
          settings: {
            arrows: false,
            centerMode: false,
            centerPadding: '40px',
            slidesToShow: 1
          }
        },
        {
          breakpoint: 600,
          /*settings: "unslick",*/
          settings: {
              centerMode: false,
              centerPadding: '0px',
              slidesToShow: 1,
              autoplay:false,
              variableWidth: true,
              dots: true,
              infinite: false,
              speed: 3000,
              arrows:false,
              mobileFirst: true
              
          }
        }
        ]  });