# SLIDORION

## New Features

### There's been some pretty important changes to Slidorion. Here are some of these changes...

- #### Allows embedded HTML

- #### New random effect (slide, over and all)

- #### Easier usability

- #### Improved performance

- #### Bug fixes; click disabled during transition

# Background Image with HTML Text

### You can give each individual slide a unique background image, allow for full customisation.

### For a cool background effect, check out this demo

New Features

Slidorion is a combination of an image slider and an accordion; displaying beautiful content through various effects.

Version 1.0 sees some vital changes and bugs fixes. Most important of these is allow HTML content to be displayed within each slide.

Slidorion was created by Ben Holland. Follow me on Twitter

A Simple Image

Slidorion caters for all kinds of content; from HTML to simple images such as this.

Make sure images are the correct size, or give that slide a background to prevent objects behind seeping through.

Check out the next slide to see an example on how to use the transparent background

Background Image w/ HTML

Each slide can be styled individually, giving you the attach to add custom backgrounds and colours to them to make Slidorion exactly what you need it to be.

For a cool background effect, check out this demo

Download

Version 1.0

### Download the Slidorion now!

Slidorion was created by Ben Holland, student and part time web developer at Tidy Design. Follow me on Twitter or check out my blog.

Tweet

Contribute or tell me about issues on GitHub

## The Slidorion

#### A combination of an image slider and an accordion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion is a great alternative to the traditional jQuery slider.

Slidorion is FREE to use provided that you leave my credits intact, and is licensed under the Apache License 2.0 see details here

Basic demo - click to see

Random Effect demo - click to see

Random Slide demo - click to see

Random Overlap demo - click to see

Multiple Slidorion demo - click to see

## Effects

fade - click for demo

slideRandom - click for demo

overRandom - click for demo

slideUp

slideRight

slideDown

slideLeft

overUp

overRight

overDown

overLeft

none

## Options

autoPlay - Automatically plays the slidorion (boolean) easing - The easing of the animations (string) effect - The effect of the animation (string) first - The first slide to show (the rel of that slide) (string) see above hoverPause - The slidorion pauses when hovered over (boolean) interval - The time between each slide (number) speed - The speed of the animation (number)

## Usage

### Import jQuery, Easing and Slidorion

    <link rel="stylesheet" href="css/slidorion.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="js/jquery.easing.js"></script>
    <script src="js/jquery.slidorion.min.js"></script>

Download Slidorion
Download Easing - v1.3 Required

### HTML Structure

The required selector tags are shown. This is the structure that must be maintained throughout. The accordion and slider can change positions though, i.e. accordion on the left

    <div id="slidorion">
    	<div id="slider">
    		<div class="slide"></div>
    		<div class="slide"></div>
    		<div class="slide"></div>
    	</div>

    	<div id="accordion">
    		<div class="link-header">New Features</div>
    		<div class="link-content">
    			<!-- content -->
    		</div>
    		<div class="link-header">A Simple Image</div>
    		<div class="link-content">
    			<!-- content -->
    		</div>
    		<div class="link-header">Background Image w/ HTML</div>
    		<div class="link-content">
    			<!-- content -->
    		</div>
    	</div>
    </div>

### Basic Initialising

    $(document).ready(function(){
    	$('#slidorion').slidorion();
    });

### Initialising With Options

    $(document).ready(function(){
    	$('#slidorion').slidorion({
    		speed: 1000,
    		interval: 4000,
    		effect: 'slideLeft'
    	});
    });

## Change Log

### Version 1.0

- Added random effects for slide, over and all
- Improved performance
- Allows for embedded HTML
- Improved usability and syntax
- Fixed bug with accordion jumping out of container
- Fixed bug with simultaneous effects

### Version 0.93

- Improved slider autoplay functionality
- Added ability to have multiple Slidorions on a page

### Version 0.92

- Solved starting image issue in IE8
- Created function to center images in the slider section
- Add the effect option "none"

### Version 0.91

- Changed the accordion to prevent page jumping
- Solved some transition issues with IE8

### Version 0.9

- Launch of Slidorion