Magic Slideshow™

Examples

Default

Buy now Get support

The standard settings without any customizations.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Slideshow: Default</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.             .wrapper { width: 700px; text-align: center; margin: 0 auto; }
  11.         </style>
  12.        
  13.     </head>
  14.     <body>
  15.        
  16.         <div class="wrapper">
  17.             <!-- define Magic Slideshow -->
  18.             <div class="MagicSlideshow">
  19.                 <img src="images/places-01-600.jpg" data-caption="Descriptive text can go here."/>
  20.                 <img src="images/places-02-600.jpg" data-caption="Write as much text here as you like."/>
  21.                 <img src="images/places-03-600.jpg" data-caption="You can use HTML such as <b>bold</b>, <i>italic</i> and <a href='http://magictoolbox.com/magicslideshow/'>links</a>."/>
  22.                 <img src="images/places-04-600.jpg" data-caption="Control the style of this text with CSS."/>
  23.                 <img src="images/places-05-600.jpg" data-caption="You can have one or two sets of text, or none at all." title="Title"/>
  24.                 <img src="images/places-06-600.jpg"/>
  25.                 <img src="images/places-07-600.jpg" data-caption="Try the <a href='example2.html'>other</a> <a href='example3.html'>slideshow</a> <a href='example4.html'>examples</a> for more ideas."/>
  26.             </div>
  27.         </div>
  28.        
  29.     </body>
  30. </html>