jQuery Image Slider With An Accordion

jQuery Image Slider With An Accordion

Slidorion

Slidorion is a jQuery image slider plugin that functions in parallel with an accordion displaying the related contents for each slide.

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

Effects

It has the following built-in effects to be used for transitions.

fade - click for demo

slideRandom - click for demo

overRandom - click for demo


slideUp

slideRight

slideDown

slideLeft


overUp

overRight

overDown

overLeft

none

Options

It has the following options can be used for transitions.


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)

controlNav - Show navigation buttons (boolean)

controlNavClass - The class of the navigation control buttons (string)

The slide to be displayed on initial load can be defined and it can be set to autoplay (hover-on-pause exists) or only manual browsing by clicking each accordion tab.

Also, few other options exist for a better customization like the speed of transitions and interval between each slide.

Usage

Import jQuery, Easing and Slidorion

	

	
	
	
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


	

Basic Initialising

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

Initialising With Options

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