1. Example

jQuery slider plug-in with animated backgrounds

Pretty cool huh? C'mon, try again!

Weeee... Don't stop! Click the Next again

All right, you got it!


HTML

<div id="circles">
<a href="index.html"><img src="images/slider/road.jpg" width="900" height="300" rel="circles_road" /></a>
<a href="index.html"><img src="images/slider/bed.jpg" width="900" height="300" rel="circles_bed" /></a>
<a href="index.html"><img src="images/slider/chair.jpg" width="900" height="300" rel="circles_chair" /></a>
<a href="index.html"><img src="images/slider/color_mix.jpg" width="900" height="300" rel="circles_hand" /></a>
<img src="images/slider/hand.jpg" width="900" height="300" />
<img src="images/slider/cactus.jpg" width="900" height="300" />
<img src="images/slider/willow.jpg" width="900" height="300" />
</div>

<div class="o-slider-captions" id="circles_road">
<h3>jQuery slider plug-in with animated backgrounds</h3>
</div>
<div class="o-slider-captions" id="circles_bed">
<h3>Pretty cool huh? C'mon, try again!</h3>
</div>
<div class="o-slider-captions" id="circles_chair">
<h3>Weeee... Don't stop! Click the Next again</h3>
</div>
<div class="o-slider-captions" id="circles_color_mix">
<h3>All right, you got it!</h3>
</div>

Javascript

$(document).ready(function(){
$('#circles').oSlider({
autoStart: true,
pauseOnHover: true,
listNavThumbs: true,
arrowsNavHide: true,
layers: {
first: {
className: 'circles-one',
offset: 6,
direction: 'ltr'
},
second: {
className: 'circles-two',
offset: 16,
direction: 'ltr'
}
}
});
});

CSS

.o-slider-external {
background: url('../images/circles_bg.png');
padding-top: 30px;
padding-bottom: 70px;
}
.o-slider-listNavThumbs {
bottom: -47px;
}
.circles-one {
background: url('../images/circles_one.png');
}
.circles-two {
background: url('../images/circles_two.png');
}


2. Example


HTML

<div id="color_lines">
<img src="images/slider/bed.jpg" width="900" height="300" />
<img src="images/slider/chair.jpg" width="900" height="300" />
<img src="images/slider/color_mix.jpg" width="900" height="300" />
<img src="images/slider/hand.jpg" width="900" height="300" />
<img src="images/slider/cactus.jpg" width="900" height="300" />
<img src="images/slider/willow.jpg" width="900" height="300" />
<img src="images/slider/road.jpg" width="900" height="300" />
</div>

Javascript

$(document).ready(function(){
$('#color_lines').oSlider({
layers: {
first: {
className: 'layer-color-lines',
offset: 20,
direction: 'ltr'
}
}
});
});

CSS

.layer-color-lines {
background: url('../images/color_lines.jpg') top;
}


3. Example

Captions at the bottom of the block

Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.

Captions at the left side of the block

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.

Captions at the right side of the block

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.

Captions at the top of the block

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


HTML

<div id="rhombuses">
<img src="images/slider/road.jpg" width="900" height="300" rel="rhombuses_bottom" />
<img src="images/slider/bed.jpg" width="900" height="300" rel="rhombuses_left" />
<img src="images/slider/chair.jpg" width="900" height="300" rel="rhombuses_right" />
<img src="images/slider/color_mix.jpg" width="900" height="300" rel="rhombuses_top" />
<img src="images/slider/hand.jpg" width="900" height="300" />
<img src="images/slider/cactus.jpg" width="900" height="300" />
<img src="images/slider/willow.jpg" width="900" height="300" />
</div>

<div class="o-slider-captions bottom" id="rhombuses_bottom">
<h3>Captions at the bottom of the block</h3>
<p>Aenean imperdiet. Etiam ultricies nisi vel augue. <a href="index.html">Curabitur ullamcorper</a> ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="o-slider-captions left" id="rhombuses_left">
<h3>Captions at the left side of the block</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="index.html">Aenean commodo</a> ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="o-slider-captions right" id="rhombuses_right">
<h3>Captions at the right side of the block</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="index.html">Aenean commodo</a> ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="o-slider-captions top" id="rhombuses_top">
<h3>Captions at the top of the block</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="index.html">Aenean commodo</a> ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Javascript

$(document).ready(function(){
$('#rhombuses').oSlider({
layers: {
first: {
className: 'layer-rhombuses',
offset: 5,
direction: 'rtl'
}
}
});
});

CSS

.o-slider-arrows.previous { left: -40px; background-position: left; }
.o-slider-arrows.next { right: -40px; background-position: right; }

.layer-rhombuses {
background: url('../images/rhombuses.jpg') top;
}


4. Example


HTML

<div id="blackwhite">
<img src="images/slider/bed.jpg" width="900" height="300" />
<img src="images/slider/chair.jpg" width="900" height="300" />
<img src="images/slider/color_mix.jpg" width="900" height="300" />
<img src="images/slider/hand.jpg" width="900" height="300" />
<img src="images/slider/cactus.jpg" width="900" height="300" />
<img src="images/slider/willow.jpg" width="900" height="300" />
<img src="images/slider/road.jpg" width="900" height="300" />
</div>

Javascript

$(document).ready(function(){
$('#blackwhite').oSlider({
layers: {
first: {
className: 'layer-blackwhite',
offset: 10,
direction: 'ltr'
}
}
});
});

CSS

.o-slider-external {
border-top: solid 2px black;
border-bottom: solid 2px black;
}
.layer-blackwhite {
background: url('../images/blackwhite.jpg') top;
}


5. Example


HTML

<div id="orange_flakes">
<img src="images/slider/road.jpg" width="900" height="300" />
<img src="images/slider/bed.jpg" width="900" height="300" />
<img src="images/slider/chair.jpg" width="900" height="300" />
<img src="images/slider/color_mix.jpg" width="900" height="300" />
<img src="images/slider/hand.jpg" width="900" height="300" />
<img src="images/slider/cactus.jpg" width="900" height="300" />
<img src="images/slider/willow.jpg" width="900" height="300" />
</div>

Javascript

$(document).ready(function(){
$('#orange_flakes').oSlider({
animSpeed: 650,
liquidLayout: false,
layers: {
first: {
className: 'orange-flakes-one',
offset: 5,
direction: 'ltr'
},
second: {
className: 'orange-flakes-two',
offset: 2,
direction: 'ltr'
}
}
});
});

CSS

.o-slider-external {
background: url('../images/background.jpg');
width: 990px;
margin: 0 auto;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.orange-flakes-one {
background: url('../images/flakes-one.png');
}
.orange-flakes-two {
background: url('../images/flakes-two.png');
}


6. Example


HTML

<div id="small">
<img src="images/slider/smaller/adorepaper.jpg" width="800" height="267" />
<img src="images/slider/smaller/chair_one.jpg" width="800" height="267" />
<img src="images/slider/smaller/beeze_one.jpg" width="800" height="267" />
<img src="images/slider/smaller/road_one.jpg" width="800" height="267" />
<img src="images/slider/smaller/sky_one.jpg" width="800" height="267" />
<img src="images/slider/smaller/basic_one.jpg" width="800" height="267" />
</div>

Javascript

$(document).ready(function(){
$('#small').oSlider({
animSpeed: 750,
liquidLayout: false,
layers: {
first: {
className: 'flowers-pattern',
offset: 10,
direction: 'ltr'
}
}
});
});

CSS

.o-slider-external {
width: 900px;
margin: 0 auto;
padding-top: 22px;
padding-bottom: 32px;
}
.o-slider-frame {
width: 800px;
height: 267px;
}
.o-slider-listNav {
background: white;
padding: 3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.flowers-pattern {
background: url('../images/pattern_one.jpg') top;
}