Magic Slideshow™

Examples

Magic Slideshow™ parameters

Buy now Get support

Define Magic Slideshow™ options with data-options attribute:

<div class="MagicSlideshow" data-options="autoplay: true; kenburns: true;"></div>

or via the MagicSlideshow.options:

<script type="text/javascript">
var MagicSlideshowOptions = {
      'autoplay': true,
      'kenburns': true
};
</script>
Parameters for Magic Slideshow™
Parameter Default Options Description
Common settings
width auto auto | <pixels> | <percentage> Slideshow width
height 62.5% auto | <pixels> | <percentage> Slideshow height
orientation horizontal horizontal | vertical Orientation of slideshow
arrows true true | false Show navigation arrows on a slide
loop true true | false Continue slideshow after the last slide
effect slide slide | fade | dissolve Slide transition effect
effect-speed 600 <milliseconds> Transition speed
Autoplay
autoplay true true | false Autoplay slideshow after initialization
slide-duration 3000 <milliseconds> Duration of showing each slide
shuffle false true | false Shuffle slide order
kenburns false true | false Ken Burns effect on slides
pause false hover | click | selector-click | false Pause autoplay
Selectors
selectors none bottom | top | right | left | none How to show selectors
selectors-style bullets bullets | thumbnails Style of the selectors
selectors-size 70 <pixels> | <size>
e.g. selectors-size: 90x60		 Size of selectors
selectors-eye true true | false Nice highlighter of active selector (Effective when selectors-style is set to thumbnails).
Caption
caption true true | false Display caption for a slide
caption-effect fade fade | dissolve | fixed Effect for caption changing
Other settings
fullscreen false true | false Enable Full Screen slideshow
preload true true | false Load images at start or on demand
keyboard true true | false Change slides with keyboard left and right arrows (always enabled in Full Screen mode)
links _self _self | _blank | false Page where to open links associated with image slides. false to disable links.
loader true true | false Enable loading icon