Description

Demoed above is the Plain Horizon - full screen width carousel with gallery features. Plain Horizon was build as a Jquery plugin. It has the following featues:

  • Adapts to all type of screen widths - large (2560x1600 px) and small (1024x768 px) - and by using the full screen width makes your site visually rich, visible, and busy.
  • Slides between image galleries each time revealing a new set of images, which contains of a single stage image on the left hand side and 4 more thumbnail images on the right hand side.
  • By clicking those thumbnail images you can bring them to the main stage by flip reversing the images along with their titles and links. This makes it fun and playful.
  • Provides you with image preloading and timing management.

We recommend using this plugin to showcase featured content on your site, such as news, main articles, or featured image galleries.

Installation

  1. Download the plugin from the Download & Support section on the right hand side.
  2. Make sure you include the dependency Jquery file in your HTML document. Please read Getting Started with jQuery tutorial.
  3. Include the following 2 files in the head section of your HTML document (this code is XHTML compatible):

    1. <script type="text/javascript" src="path_to/jquery.plain-horizon.js"></script>
    2. <link rel="stylesheet" href="path_to/plain-horizon.css" type="text/css" media="all" />
  4. Use the following code snipped for basic usage:

    $(selector).plain_horizon({property: value});

Options

  • Property Description Default value
  • speed Sets the speed of the slide transition (in mlliseconds) 2000
  • easing Name of the easing type null
  • wait Time interval to wait before next slide is revealed (in mlliseconds) 7000
  • autostart If set to true, the carousel will auto-start true
  • pauseOnHover If set to true, the carousel will stop playing on mouse over true
  • enableGallery If set to true, the carousel will enable gallery features on each slide true