Default
Usage
Javascript:
$(document).ready(function(){
$("#slider").sudoSlider();
});HTML:
<div id="slider" class="slider" >
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
Numeric
Usage
Javascript:
$(document).ready(function(){
$("#slider2").sudoSlider({
numeric:true,
prevNext:false,
startSlide: 2
});
});
HTML:
<div id="slider2" class="slider" >
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
fade
Usage
Javascript:
$(document).ready(function(){
$("#slider3").sudoSlider({
numeric: true,
fade: true,
prevNext: true,
startSlide: 3,
updateBefore: true,
numericText:['slide1', 'slide2', 'third slide', 'number 4', 'last slide']
});
});
HTML:
<div id="slider3" class="slider" >
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
Autoheight and continuous
Usage
Javascript:
$(document).ready(function(){
$("#slider4").sudoSlider({
continuous: true,
prevNext:true,
numeric: true,
fadespeed: '1200',
insertAfter: false
});
});
HTML:
<div id="slider4" class="slider" >
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
Vertical
Usage
Javascript:
$(document).ready(function(){
$("#slider5").sudoSlider({
vertical:true,
numeric: true,
autoheight: false,
prevNext: true
});
});
HTML:
<div id="slider5" class="slider" style="height:241px;">
<ul style="height:241px;">
<li style="height:241px;">Content</li>
<li style="height:241px;">Content</li>
<li style="height:241px;">Content</li>
<li style="height:241px;">Content</li>
<li style="height:241px;">Content</li>
</ul>
</div>
History
Try pressing the browsers back/forward button after sliding through some slides.
Internet Explorer jumps to the top of the page when clicking the browsers back/forward buttons, so having a slider with history on at the bottom of a page is a bad idea.
Usage
Include in header (Sudo Slider uses the jQuery Address plugin to monitor URL changes):
<script type="Text/Javascript" src="js/jquery.address-1.2.2.min.js"></script>
Javascript:
$(document).ready(function(){
$("#slider6").sudoSlider({
history:true,
numeric: true,
prevNext: false,
numericText:['slide 1', 'slide 2', 'third slide', 'number 4', 'last slide'],
fade: true,
updateBefore: true
});
});
HTML:
<div id="slider6" class="slider">
<ul>
<li >Content</li>
<li >Content</li>
<li >Content</li>
<li >Content</li>
<li >Content</li>
</ul>
</div>
customLinks
Usage
Javascript:
$(document).ready(function(){
$("#slider7").sudoSlider({
prevNext: false,
customLink:'a.customLink',
updateBefore:true
});
});
HTML:
<div class="tabs">
<a class="customLink" rel="1"><div class="tabbox">A tab</div></a>
<a class="customLink" rel="2"><div class="tabbox">Tab number 2</div></a>
<a class="customLink" rel="3"><div class="tabbox">Tab number 3 </div></a>
</div>
<div id="slider7" class="slider" >
<ul style="height:241px;">
<li >Content</li>
<li >Content</li>
<li >Content</li>
</ul>
</div>
Ajax
It might not be obvious, but these images (and html documents) are loaded asynchronous.
Usage
Javascript:
$(document).ready(function(){
$("#slider8").sudoSlider({
prevNext: false,
ajax: ['ajax.html', 'images/02.jpg', 'images/07.jpg'],
numeric:true,
updateBefore:true
});
});
HTML:
<div id="slider8" class="slider"></div>
Example usage of imgAjaxFunction
Go to the 2. slide and click the image.
Usage
This example uses the simplemodal jQuery plugin, so you need to include something like this in the header.
<script type="Text/Javascript" src="js/jquery.simplemodal.js"></script>
Javascript:
$(document).ready(function(){
$("#slider9").sudoSlider({
customLink:'a.customLink2',
ajax: ['images/01.jpg', 'images/06.jpg', 'images/03.jpg'],
continuous: true,
clickableAni: true,
imgAjaxFunction: function(t){
var target = $(this).children();
if (target.attr('oldheight') > target.width())
{
target.css('cursor' , 'pointer').click(function() {
var maxheight = $(window).height() - 80;
var maxwidth = $(window).width() - 40;
var width = target.attr('oldwidth');
var height = target.attr('oldheight');
var imageUrl = target.attr("src");
if (height > maxheight)
{
var ratio = width/height;
var height = maxheight;
var width = height * ratio;
}
if (width > maxwidth)
{
var ratio = height/width;
var width = maxwidth;
var height = width * ratio;
}
var modalhtml = "<p style='line-height:10px;'>
This is slide number " + t + "</p>
<div style='width:" + width + "px;height:" + height + "px;'>
<img
src='" + imageUrl + "'
style='width:" + width + "px;height:" + height + "px;'
/>
</div>";
jQuery.modal(modalhtml);
});
}
}
});
});
HTML:
<div class="tabs">
<a class="customLink" rel="1"><div class="tabbox">A tab</div></a>
<a class="customLink" rel="2"><div class="tabbox">Tab number 2</div></a>
<a class="customLink" rel="3"><div class="tabbox">Tab number 3 </div></a>
</div>
<div id="slider9" class="slider"> </div>
Not crossfading
This is sometimes the best way. Mostly when a lot of text is involved.
But this is still just images.
Usage
Javascript:
$(document).ready(function(){
$("#slider10").sudoSlider({
prevNext: false,
numeric:true,
fade: true,
crossFade: false,
updateBefore:true
});
});
HTML:
<div id="slider10" class="slider">
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
Auto fading
Note that the automatic sliding stops when a user performs an action.
Therefore it's a good idea to hide the controls.
Blocking the controls using "$("#slider").sudoSlider('block');" will stop the automatic sliding.
Usage
Javascript:
$(document).ready(function(){
$("#slider11").sudoSlider({
prevNext: false,
fade: true,
auto:true
});
});
HTML:
<div id="slider11" class="slider">
<ul>
<li >Content</li>
<li >Content</li>
<li >Content</li>
<li >Content</li>
<li >Content</li>
</ul>
</div>
Slide on event
The demo below this one, is the same, just all ajax-loaded content. (Because i can)
-
Here i got some kind of form.
If you enter something in the below form, you can get to the next slide by clicking the button.
-
Because you were able to put something into the form, i here got you a picture of a goat.
Go back
Usage
Javascript:
$(document).ready(function(){
$("#slider12").sudoSlider({
prevNext: false,
customLink:'a.eventclass'
});
$('button.clickbuttonclass').click(function() {
// Here i do some check, to see if the content is valid.
var value = false;
$('input#someID').each(function() {
value = $(this).val();
});
if (value)
{
$("#slider12").sudoSlider(2);
}
else
{
alert('ERROR!!!');
}
});
});
HTML:
<div id="slider12" class="slider">
<ul>
<li>
<p>TEXT</p>
<input type="text" id="someID">
<p><button class="clickbuttonclass" style="padding:25px;font-size:25px;" >
CLICK HERE!
</button>
</li>
<li>
<p>Text and content.</p>
<a class="eventclass" rel="prev" href="#">Go back</a>
</li>
</ul>
</div>
Slide on event with ajax loaded content.
The idea is that a customLink doesn't have to be there, you can just create and click one with javascript when you need it.
Usage
You also need the documents form.html and succes.html
Javascript:
$(document).ready(function(){
$("#slider13").sudoSlider({
prevNext: false,
ajax: ['form.html', 'succes.html'],
customLink:'a.eventlink'
});
});
HTML:
<div id="slider13" class="slider"></div>
beforeAniFunc and afterAniFunc in use.
Slide:1 of 5
The src of the image: slidehtml.
The src of the image: slidehtml.
Usage
Javascript:
$(document).ready(function(){
$("#slider14").sudoSlider({
prevNext: false,
numeric: true,
beforeAniFunc: function(t){
$('div.descrip-text #anistate').text('Animating to slide ' + t).show(600);
},
afterAniFunc: function(t){
$('div.descrip-text #anistate').hide(400);
$('div.descrip-text #slidenumber').text(t);
var text = $(this).children().attr('src');
$('div.descrip-text #slidehtml').text(text);
}
});
});
HTML:
<div id="slider11" class="slider">
<ul>
<li >Content</li>
<li >Content</li>
<li >Content</li>
<li >Content</li>
<li >Content</li>
</ul>
</div>
Multiple "slides" pr. slide
The width of the viewport, doesn't have to be the same as the slide.
Usage
Javascript:
$(document).ready(function(){
$("#slider15").sudoSlider();
});
HTML:
<div id="slider15" class="slider">
<ul>
<li >Content</li>
<li >Content</li>
<li >Content</li>
<li >Content</li>
<li >Content</li>
</ul>
</div>
CSS:
#slider15 li {
width:350px;
}
currentFunc and uncurrentFunc
A quick example of how to use currentFunc and uncurrentFunc
Usage
Javascript:
$(document).ready(function(){
$("#slider16").sudoSlider({
prevNext: true,
updateBefore: true,
numeric: true,
currentFunc: function(t){
$(this).children().stop().fadeTo(500, 1).text('Current slide');
},
uncurrentFunc: function(t){
$(this).children().stop().fadeTo(500, 0.5).text(t);
}
});
});
HTML:
<div id="slider16" class="slider">
<ul>
<li >Content</li>
<li >Content</li>
<li >Content</li>
<li >Content</li>
<li >Content</li>
</ul>
</div>
Captions
Usage
Javascript:
var ajaximages = [
'images/01.jpg',
'images/04.jpg',
'images/02.jpg',
'images/03.jpg',
'images/05.jpg'
];
var imagestext = [
'Just another beautiful sunset',
'Behind another beautiful sunset',
'Mountains in the Alps',
'Road and mountains in the Alps',
'A goat in norway',
];
$("#slider17").sudoSlider({
fade:true,
continuous:true,
ajax: ajaximages,
imgAjaxFunction: function(t){
$(this)
.css("position","relative")
.append('<div class="caption" >' + imagestext[t-1] + '</div>');
},
beforeAniFunc: function(t){
$(this).children('.caption').hide();
},
afterAniFunc: function(t){
$(this).children('.caption').slideDown(400);
}
});
HTML:
<div id="slider17" class="slider"></div>
CSS:
.caption {
position:absolute;
bottom:0;
left:0;
width:700px;
height:25px;
text-align:center;
color:black;
background:white;
background:transparent;
background:rgba(255,255,255,0.7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3ffffff,endColorstr=#a3ffffff);
zoom: 1;
}