Multiple slideshows

Buy now Get support

Every slideshow on your page can have different parameters.

Thumbnails on the right. Custom background.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Multiple slideshows</title>
  4.        
  5.         <!-- link to magicslideshow.css file -->
  6.         <link rel="stylesheet" type="text/css" href="magicslideshow/magicslideshow.css" media="screen"/>
  7.         <!-- link to magicslideshow.js file -->
  8.         <script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>
  9.         <style type="text/css">
  10.         #slide-2 .mss-slider,
  11.         #slide-2 .mss-selectors {
  12.             background-color: #e7eabf;
  13.         }
  14.         #slide-2 .mss-slide { padding-left: 8px; }
  15.         </style>
  16.        
  17.     </head>
  18.     <body>
  19.        
  20.             <div class="MagicSlideshow" data-options="width: 600; height: 46.8%; selectors: bottom;">
  21.                 <img src="images/places-01-600.jpg"/>
  22.                 <img src="images/places-02-600.jpg"/>
  23.                 <img src="images/places-03-600.jpg"/>
  24.                 <img src="images/places-04-600.jpg"/>
  25.                 <img src="images/places-05-600.jpg"/>
  26.                 <img src="images/places-06-600.jpg"/>
  27.                 <img src="images/places-07-600.jpg"/>
  28.             </div>
  29.  
  30.             <p>Thumbnails on the right. Custom background.</p>
  31.             <div id="slide-2" class="MagicSlideshow" data-options="width: 400; selectors: right; selectors-style: thumbnails; selectors-size: 60x28; effect: dissolve; effect-speed: 1000;">
  32.                 <img src="images/places-01-600.jpg"/>
  33.                 <img src="images/places-02-600.jpg"/>
  34.                 <img src="images/places-03-600.jpg"/>
  35.                 <img src="images/places-04-600.jpg"/>
  36.                 <img src="images/places-05-600.jpg"/>
  37.                 <img src="images/places-06-600.jpg"/>
  38.                 <img src="images/places-07-600.jpg"/>
  39.                 <img src="images/places-08-600.jpg"/>
  40.                 <img src="images/places-09-600.jpg"/>
  41.             </div>
  42.        
  43.     </body>
  44. </html>