Sudo Slider jQuery Plugin - Callbacks 1 demo
afterAniFunc & beforeAniFunc in docs
Animating to slide 1
Slide:
1 of 5
The src of the image:
images/01.jpg
Usage
Include the javascripts
<script type="Text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
The Javascript to start it.
<script type="text/javascript" >
$(document).ready(function(){
var sudoSlider = $("#slider").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);
}
});
});
</script>
The CSS
#slider {
width:696px;
}
#slider img{
border:none;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li {
width:696px;
overflow:hidden;
}
The HTML
<div id="slider" >
<ul>
<li><img src="../images/01.jpg" alt="image description"/></li>
<li><img src="../images/02.jpg" alt="image description"/></li>
<li><img src="../images/03.jpg" alt="image description"/></li>
<li><img src="../images/04.jpg" alt="image description"/></li>
<li><img src="../images/05.jpg" alt="image description"/></li>
</ul>
</div>
<div class="descrip-text"><p id="anistate" style="display: none; ">Animating to slide 1</p>
Slide:<span id="slidenumber">1</span> of 5 <br> The src of the image:
<span id="slidehtml">images/01.jpg</span></div>