Settings wizard

Buy now Get support

Change the settings and click Preview. The source code is shown underneath.

Choose your settings
Common
Width (auto | % | px):
Height (auto | % | px):
Orientation:
Show navigation arrows on slide:
Continuous loop:
Transition effect:
Transition speed (ms):
Autoplay
Autoplay:
Duration of showing each slide, ms:
Shuffle slide order:
Ken Burns effect:
Pause autoplay:
Selectors
Selectors:
Selectors style:
Selectors size (px):
Selectors eye:
Caption
Show caption on slide:
Caption change with effect:
Other
Full Screen:
Keyboard navigation:
Load images on demand:
Show loading icon:
Open links associated with image slides:

Here's the code:

  1. <div class="MagicSlideshow" data-options="">
  2.         <img src="images/places-01-600.jpg" data-fullscreen-image="images/places-01-1075.jpg"/>
  3.         <img src="images/places-02-600.jpg" data-fullscreen-image="images/places-02-1075.jpg"/>
  4.         <img src="images/places-03-600.jpg" data-fullscreen-image="images/places-03-1075.jpg"/>
  5.         <img src="images/places-04-600.jpg" data-fullscreen-image="images/places-04-1075.jpg"/>
  6.         <img src="images/places-05-600.jpg" data-fullscreen-image="images/places-06-1075.jpg"/>
  7.         <img src="images/places-06-600.jpg" data-fullscreen-image="images/places-07-1075.jpg"/>
  8.         <img src="images/places-07-600.jpg" data-fullscreen-image="images/places-08-1075.jpg"/>
  9.         <img src="images/places-08-600.jpg" data-fullscreen-image="images/places-09-1075.jpg"/>
  10.         <img src="images/places-09-600.jpg" data-fullscreen-image="images/places-10-1075.jpg"/>
  11.         <img src="images/places-10-600.jpg" data-fullscreen-image="images/places-11-1075.jpg"/>
  12.         <img src="images/places-11-600.jpg" data-fullscreen-image="images/places-12-1075.jpg"/>
  13.         <img src="images/places-12-600.jpg" data-fullscreen-image="images/places-13-1075.jpg"/>
  14.     </div>