<html>
<head>
<title>Multiple slideshows</title>
<!-- link to magicslideshow.css file -->
<link rel="stylesheet" type="text/css" href="magicslideshow/magicslideshow.css" media="screen"/>
<!-- link to magicslideshow.js file -->
<script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>
<style type="text/css">
#slide-2 .mss-slider,
#slide-2 .mss-selectors {
background-color: #e7eabf;
}
#slide-2 .mss-slide { padding-left: 8px; }
</style>
</head>
<body>
<div class="MagicSlideshow" data-options="width: 600; height: 46.8%; selectors: bottom;">
<img src="images/places-01-600.jpg"/>
<img src="images/places-02-600.jpg"/>
<img src="images/places-03-600.jpg"/>
<img src="images/places-04-600.jpg"/>
<img src="images/places-05-600.jpg"/>
<img src="images/places-06-600.jpg"/>
<img src="images/places-07-600.jpg"/>
</div>
<p>Thumbnails on the right. Custom background.</p>
<div id="slide-2" class="MagicSlideshow" data-options="width: 400; selectors: right; selectors-style: thumbnails; selectors-size: 60x28; effect: dissolve; effect-speed: 1000;">
<img src="images/places-01-600.jpg"/>
<img src="images/places-02-600.jpg"/>
<img src="images/places-03-600.jpg"/>
<img src="images/places-04-600.jpg"/>
<img src="images/places-05-600.jpg"/>
<img src="images/places-06-600.jpg"/>
<img src="images/places-07-600.jpg"/>
<img src="images/places-08-600.jpg"/>
<img src="images/places-09-600.jpg"/>
</div>
</body>
</html>