Download the Choco-Slider (Javascript and CSS). Having done so, include them and the jQuery library on the site:
<link rel="stylesheet" href="chocoslider.css" type="text/css" />
<script type="text/javascript" src="jquery.chocoslider.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Add the next container, edit images, alt and title your question:
<div id="slider">
<img src="img/img_1.jpg" alt="" title=""/>
<img src="img/img_2.jpg" alt="" title=""/>
<img src="img/img_3.jpg" alt="" title=""/>
<img src="img/img_4.jpg" alt="" title=""/>
<img src="img/img_5.jpg" alt="" title=""/>
</div>
Add the following before the closing </ head> to call Choco-Slider:
<script type="text/javascript">
$(window).load(function() {
$('#slider').chocoslider();
});
</script>
In case you do not customize the options, it automatically will use the default options:
auto:true, (if you want automatic slider)
autoPause:true, (to stop the slider after clicking)
speedStrip:500, (Speed between the strips)
effect:'random', (There are three types: 'slide', 'fade' and 'random')
numberStrips:15, (number of strips to show)
sliderDelay:3000, (time delay between images transition)
transparencytitle:0.8, (Transparency of the title)
bChange: function(){}, (function necessary to complete)
aChange: function(){}, (function necessary to complete)
chocoEnd: function(){}, (function necessary to complete)
controlNavigation:true (Removing only show images)
Example Nº 1:
<script type="text/javascript">
$(window).load(function() {
$('#slider').chocoslider({
auto:true,
autoPause:true,
speedStrip:500,
effect:'effect1',
numberStrips:15,
sliderDelay:3000,
transparencytitle:0.8,
bChange: function(){},
aChange: function(){},
chocoEnd: function(){},
controlNavigation:true
});
});
</script>
Example Nº 2:
<script type="text/javascript">
$(window).load(function() {
$('#slider').chocoslider({
auto:true,
autoPause:false,
speedStrip:500,
effect:'random',
numberStrips:15,
sliderDelay:6000,
transparencytitle:1.0,
bChange: function(){},
aChange: function(){},
chocoEnd: function(){},
controlNavigation:false
});
});
</script>