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
- Download the plugin from the Download & Support section on the right hand side.
- Make sure you include the dependency Jquery file in your HTML document. Please read Getting Started with jQuery tutorial.
-
Include the following 2 files in the head section of your HTML document (this code is XHTML compatible):
<script type="text/javascript" src="path_to/jquery.plain-horizon.js"></script>
<link rel="stylesheet" href="path_to/plain-horizon.css" type="text/css" media="all" />
-
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