Rotating Slideshow w/ Caption

This module for the 2013 template version 3.02 allows you to specify several background images for the header of your home page and display them sequentially, with captions.

Rotating Banner 1Rotating Banner 2Rotating Banner 3


  1. Download and unzip the slideshow_banner (ZIP).
  2. Copy slideshow.css to your /css folder.
  3. Copy slideshow_banner.js and swipesense.js to the /javascript folder.
  4. Copy the /images/slideshow folder and its contents (five images) to /images/slideshow .
  5. Copy the contents of header.addition.txt to your header.*.html, just before the closing </header> tag. See header.example.html for an example.
  6. Copy these lines to the end of the <head> section of your home page:
    <link rel="stylesheet" href="/css/slideshow.css">
    <script src="/javascript/slideshow_banner.js"></script>
    <script src="/javascript/swipesense.js"></script>
  7. Cut these lines from head_css_js.html and paste them to the end of footer_2.html:
    <!--[if lt IE 9]>
    <script src="/javascript/libs/respond.min.js"></script>
  8. Replace the background images and text with your own. To add an additional slide, add a div to header.*.html where indicated, and specify the background image in slideshow.css, line 73.

Latest Changes

10/21/2014 – Fixes for IE7 and IE8.


Submit a Comment