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.

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

Version 0.93

Version 0.92

Version 0.91

Version 0.9