Mono

A minimal but colorful slider for showcasing one large product per slide

A minimal theme ideal for displaying one large product and title per slide. The background transitions between each slide as the user navigates through products.

Theme Price:Free
Theme License: GPLv3
Choose a Sequence.js License
Demo Download

Desktop Layout Example

Mobile Layout Example

Features

Mono is responsive and supported across a wide range of devices. In its smallest layout, the product image and title are shown with previous and next buttons appearing either side. In larger layouts, pagination links are displayed underneath the content. Each pagination link is a small version of that slide’s product image.

Responsive

Supports 320px width and up. Tested on mobile, tablet, and desktop devices.

Touch Support

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

Cross Browser

Works across modern browsers, with a fallback theme in Internet Explorer 8 and 9. Optionally, you may use respond.js with this theme to add media query support in Internet Explorer 8.

Easily Modified

All Sequence.js themes can be easily modified using just HTML and CSS. This theme includes a Sass file and automated development environment via Grunt.js.

Quick Install

To add a Sequence.js theme to a web page, complete the following:

  1. Download and unzip your theme
  2. Move the mono folder to the same folder as the page you'd like the Sequence.js theme to appear on
  3. Add the theme's stylesheet within the <head></head> tags on your page, below existing stylesheets. For example:
    <link rel="stylesheet" href="mono/css/sequence-theme.mono.css" />
  4. From mono/index.html, copy everything inside the <body></body> tags, then paste into the page you'd like the theme to appear on.
  5. From mono/index.html, copy any <script></script> elements found toward the bottom of the page and paste just before the closing </body> tag. This should include a reference to the Sequence.js library, its third-party dependencies, and the theme's options, for example:
    <script src="mono/scripts/imagesloaded.pkgd.min.js"></script>
    <script src="mono/scripts/hammer.min.js"></script>
    <script src="mono/scripts/sequence.min.js"></script>
    <script src="mono/scripts/sequence-theme.mono.js"></script>
  6. Save your page and view in the browser.

Refer to your theme's README file for any additional instructions.

Customizing a Theme

To customize how a theme behaves, its Sequence.js options can be changed in mono/scripts/sequence-theme.mono.js. See Options in the documentation.

To customize how a theme looks and how its step's transition, refer to the theme's stylesheet: mono/css/sequence-theme.mono.css.

It is recommended to read Setting Up a Theme in the documentation for an overview of how transitions are applied to Sequence.js steps.