Muhammad Ali

Muhammad Ali (born Cassius Marcellus Clay, Jr.) is an American former professional boxer, philanthropist and social activist. Nicknamed "The Greatest", and widely considered the best heavyweight of all-time, Ali was involved in several historic boxing matches.

Ali become the first and only three-time lineal World Heavyweight Champion.

Usain Bolt

Usain Bolt is a Jamaican sprinter widely regarded as the fastest person ever. He is the first man to hold both the 100 and 200 metres world records since automatic time measurements became mandatory in 1977.

His achievements have earned him the media nickname "Lightning Bolt", and awards including the IAAF World Athlete of the Year and Track & Field Athlete of the Year

Michael Jordan

Michael Jeffrey Jordan (MJ), is an American former professional basketball player, entrepreneur, and majority owner and chairman of the Charlotte Bobcats.

MJ's individual accolades and accomplishments include five MVP awards, fourteen NBA All-Star Game appearances and many more. He was inducted into the Basketball Hall of Fame in 2009.

Download

Version 1.2

Download the Slidorion now!

Slidorion was created by Ben Holland

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)

controlNav - Show navigation buttons (boolean)

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

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" class="slidorion">
    <div class="slider">
        <div class="slide"><img src="img/boxing.jpg" /></div>
        <div class="slide"><img src="img/athletics.jpg" /></div>
        <div class="slide"><img src="img/basketball.jpg" /></div>
    </div>

    <div class="accordion">
        <div class="header">Muhammad Ali</div>
        <div class="content"><-- CONTENT GOES HERE --></div>
        <div class="header">Usain Bolt</div>
        <div class="content"><-- CONTENT GOES HERE --></div>
        <div class="header">Michael Jordan</div>
        <div class="content"><-- CONTENT GOES HERE --></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.2

Version 1.1

Version 1.0

Version 0.93

Version 0.92

Version 0.91

Version 0.9