Split Slide

Sliding Door Style Transitions

A vibrant and unique theme with a diagonal sliding door transition. Each frame is split in to two sections, when a frame is navigated to, the frames slide toward the center to join and reveal the products. Each section has a different color to really make the frame stand out.

  • $9

  • Responsive

    Responsive

    Layout scales down to 320px for mobile devices and works great on desktop and tablet devices too.

  • Touch Support

    Touch Support

    Touch swiping and tapping supported to allow for navigation between photos.

  • Cross Browser

    Cross Browser

    Works across all modern browsers, with a fallback theme in Internet Explorer 7, 8 and 9.

  • Easily Modified

    Easily Modified

    All Sequence themes can be easily modified using just HTML and CSS. This theme also includes a SASS file.

  • Layered PNG Included

    Layered PNG Included

    Layered PNG/PSD included to allow you to edit this theme in a graphics editing application.

  • Unique Theme Features

    Unique Theme Features

    Includes a caption for each product. Pagination is built in -- products in the background can be clicked to navigate to them.

Quick Installation

  1. Purchase and download the Split Slide theme which includes sequence.js
  2. Unzip and move the split-slide folder to the same directory as the page you'd like the theme to appear on
  3. Add this themes stylesheet within the <head></head> tags on your page, below existing stylesheets:
    <link rel="stylesheet" href="split-slide/css/sequencejs-theme.split-slide.css" />
  4. Add a reference to jQuery 1.9.1, sequence.js and this themes custom options within the <head></head> tags on your page:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="split-slide/scripts/jquery.sequence-min.js"></script>
    <script src="split-slide/sequencejs-options.split-slide.js"></script>
  5. From index.html in the downloaded theme, copy everything inside the <body></body> tags, then paste into the page you'd like the theme to appear on
  6. Save your file and upload newly added/modified files to your web server. You're done!