jQuery Image Slider With An Accordion

jQuery Image Slider With An Accordion


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


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

fade - click for demo

slideRandom - click for demo

overRandom - click for demo











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.


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


Initialising With Options

		speed: 1000,
		interval: 4000,
		effect: 'slideLeft'