Nivo-slider is een leuke en flexibele image-slider, gemaakt in jQuery. Deze is vrij simpel in een website in te bouwen en er zijn plugins voor Drupal, Joomla! (en ik geloof zelfs WordPress) op gebaseerd.

Wat ik niet voor elkaar kreeg was de slideshow met een random slide beginnen. En dat heeft wel mijn voorkeur want zo krijgen terugkerende bezoekers nog eens wat variatie te zien. Uiteindelijk is het gelukt met deze code:

<script type="text/javascript">
$(window).load(function() {
var total = $('#slider img').length;
var rand = Math.floor(Math.random()*total);
$('#slider').nivoSlider({
startSlide:rand
});
});
</script>

Deze code moet dus in de HTML-pagina worden geladen.  Voor de duidelijkheid is dit mijn hele HTML code:

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<TITLE>Slider</TITLE>
<link rel="stylesheet" href="./nivo-slider.css" type="text/css" media="screen">
<link rel="stylesheet" ./custom-nivo-slider.css" type="text/css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="./jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
var total = $('#slider img').length;
var rand = Math.floor(Math.random()*total);
$('#slider').nivoSlider({
effect:'sliceDown', //Specify sets like: 'fold,fade,sliceDown'
slices:9,
animSpeed:500,
pauseTime:10000,
startSlide:rand
});
});
</script>
</HEAD>
<body>
<div id="slider">
 <a href=""><img src="./images/slide1.jpg" alt="" title="Onderschrift 1"/> </a>
 <a href=""><img src="./images/slide2.jpg" alt="" title="Onderschrift 2"/> </a>
 <a href=""><img src="./images/slide3.jpg" alt="" title="Onderschrift 3"/></a>
 <a href=""><img src="./images/slide4.jpg" alt="" title="Onderschrift 4"/></a>
 <a href=""><img src="./images/slide5.jpg" alt="" title="Onderschrift 5"/></a>
 <a href=""><img src="./images/slide6.jpg" alt="" title="Onderschrift 6"/></a>
</div>
</body>
</HTML>