Install this beautiful photo slideshow on your website.

Getting Started

If you're using one of these platforms, click your platform and follow the instructions to install the Magic Slideshow module:

If you're not using one of the platforms above, install Magic Slideshow like so:

  1. Download the Magic Slideshow demo (zip).
  2. Unzip the file on your computer and FTP the magicslideshow folder to your website directory (on your server), keeping the file and folder structure intact.
  3. Reference the magicslideshow.js and magicslideshow.css files before your </head> tag (or elsewhere on your page). For example:

    <link rel="stylesheet" type="text/css" href="magicslideshow/magicslideshow.css"/>
    <script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>
  4. Create a <div> with the class MagicSlideshow.
  5. Place your images in the <div>, for example:

    <div class="MagicSlideshow">
    <img src="example1.jpg"/>
    <img src="example2.jpg"/>
    <img src="example3.jpg"/>
  6. That's it! Continue reading to change the size, effects, speed, captions and other settings...

Contact us and we will help with any questions you have.

To remove the "Please upgrade" message, buy a license and overwrite the magicslideshow.js file with that from your license.

This 4-minute video shows exactly how to install Magic Slideshow.

For a more detailed video, watch the beginners guide.


You can choose the width and height of your slideshow or leave Magic Slideshow to set the dimensions via these defaults:

  • Width : 100% of the parent area (e.g. the div or td of your page).
  • Height : 62.5% of the width (that's a 16:10 aspect ratio).

If dimensions are automatically set by Magic Slideshow, the slideshow will look like this:

<div class="MagicSlideshow">
<img src="example1.jpg"/>
<img src="example2.jpg"/>
<img src="example3.jpg"/>

To control the exact size of your slideshow, set the width and height in either px or %.

<div class="MagicSlideshow" data-options="width: 400px; height:187px;">

This next example uses 40% width. The parent on this particular page is a div of 430px width, so the slideshow width will be less than half of that:

<div class="MagicSlideshow" data-options="width: 40%;">

Slideshows are responsive - if a users' display is smaller than your slideshow width, it will automatically scale down to fit their display, no matter whether you use px or %.


Each image can have a thumbnail or bullets image for quick navigation between slides.

You can choose the width of the thumbnails. This example shows 60px width thumbnails:

<div class="MagicSlideshow" data-options="selectors-style: thumbnails; selectors: bottom; selectors-size: 60px; width:400px; height:187px;">
<img src="example1.jpg"/>
<img src="example2.jpg"/>
<img src="example3.jpg"/>

Thumbnails can be positioned top, left, bottom or right (default is none). You can change the location of thumbnails with the selectors option, for example:

<div class="MagicSlideshow" data-options="selectors: right; selectors-style: thumbnails; selectors-size: 40px; width:400px; height:187px;">
<img src="example1.jpg"/>
<img src="example2.jpg"/>
<img src="example3.jpg"/>

Instead of having Magic Slideshow downsize your main images, you can use another set of images as your thumbnails. Reference them with data-thumb-image like so:

<div class="MagicSlideshow" data-options="selectors: bottom; selectors-style: thumbnails; selectors-size: 40px; width:400px; height:187px;">
<img src="example1.jpg" data-thumb-image="example1-thumb.jpg"/>
<img src="example2.jpg" data-thumb-image="example2-thumb.jpg"/>
<img src="example3.jpg" data-thumb-image="example3-thumb.jpg"/>

The current thumbnail is highlighted via a parameter called selectors-eye. You can adjust the style of the highlighting (thickness, color, shadow) via the CSS. Or you can turn it off like so:

<div class="MagicSlideshow" data-options="selectors: top; selectors-style: thumbnails; selectors-eye: false; width:400px; height:187px;">


Instead of using thumbnails, you can switch between slides via bullets underneath the slideshow.

Set selectors-style to bullets like so:

<div class="MagicSlideshow" data-options="selectors-style: bullets;">

And choose whereabouts you'd like the bullets to be placed (top, bottom, left or right):

<div class="MagicSlideshow" data-options="selectors-style: bullets; selectors: bottom; width: 400px; height: 187px;">

Bullets on sides add 40px width to the slideshow, by default, so if you want the slideshow to be the same size as your images, speficy the width with 40px added. In this case, the image width is 400px, so the slideshow width has been set at 440px:

<div class="MagicSlideshow" data-options="selectors-style: bullets; selectors: bottom; width: 440px; height: 46.75%;">

Change the style of the bullets by editing the CSS in the magicslideshow.default.css file. This CSS will make the bullets larger:

.mss-bullets .mss-selector {
width: 24px;
height: 24px;
border-radius: 4px;
margin: 12px;
.mss-selectors-vertical .mss-bullets .mss-selectors-container {
width: 24px;
#custom-bullets .mss-bullets .mss-selector:after {
width: 12px;
height: 12px;
margin: 4px;


You can change the speed of the slide/fade/dissolve effect (effect-speed). You can also change the length of time each slide stays visible for (effect-duration).

In the example below, each slide is shown for 5 seconds (normally 3000 milliseconds) and the fade effect lasts 2.5 seconds (normally 600 milliseconds):

<div class="MagicSlideshow" data-options="effect:dissolve; slide-duration: 5000; effect-speed:2500;">


Show an impressive full-screen version of your slideshow by referencing large versions of your images with data-fullscreen-image, like so:

<div class="MagicSlideshow" data-options="height:187px;width:400px;fullscreen: true; effect: fade;">
<img src="example1.jpg" data-fullscreen-image="example1-large.jpg"/>
<img src="example2.jpg" data-fullscreen-image="example2-large.jpg"/>
<img src="example3.jpg" data-fullscreen-image="example3-large.jpg"/>

Fading slideshow

To create a fading slideshow, change the effect parameter to either fade or dissolve.

  • fade - fade-in the next slide only.
  • dissolve - fade-in the next slide and fade-out the current one.

Example for fade:

<div class="MagicSlideshow" data-options="width: 400px; height: 187px; effect: fade">

Example for dissolve (the difference is subtle):

<div class="MagicSlideshow" data-options="width: 400px; height: 187px; effect: dissolve">

You can adjust the speed of the fading effect by changing effect-speed (default speed is 600ms). This next example has a much faster dissolve effect (200ms):

<div class="MagicSlideshow" data-options="width: 400px; height: 187px; effect: dissolve; effect-speed: 200;">

Ken Burns slideshow

The Ken Burns effect is a popular technique for panning an image to make it look like you're slowly zooming in or out.

<div class="MagicSlideshow" data-options="kenburns: true; effect: fade; autoplay: true;  selectors: none;">

Link to URLs

Each image can link to a URL. Simply add a href to the link. Example:

<div class="MagicSlideshow">
<a href="/"><img src="example1.jpg"/></a>
<a href="example.html"><img src="example2.jpg"/></a>
<a href=""><img src="example3.jpg"/></a>

You can also add links within the text description. Example:

<div class="MagicSlideshow">
<a><img src="example3.jpg"/><span>You can add links [a href="example.htm"]within this span[/a].</span></a>


You can scroll your slideshow vertically (up / down) instead of horizontally (right / left). Set the orientation parameter like so:

<div class="MagicSlideshow" data-options="orientation: vertical; width: 400; height: 187;">


On hover over a slideshow, forwards and backwards arrows appear to the left and right. For vertical slideshows, the arrows appear to the top and bottom.

There are 6 icons:

  • Left
  • Right
  • Up
  • Down
  • Full-screen
  • Close

There is one set for slides and a smaller set for thumbnails. There is a hover state for every image. This makes 24 icons in total.

The file buttons.png has 12px buttons and 24px buttons.

There is a further set of 24 icons, which are served to high resolution retina displays:

The file buttons@2x.png has 32px buttons and 46px buttons.

You can design your own set of arrows, by creating images like the two above, using the same width and height of each icon.

You can remove the arrows by using the arrows parameter like so:

<div class="MagicSlideshow" data-options="arrows: false;">

HTML content

A slideshow can be more than just images - it can contain any HTML content!

What will you create with Magic Slideshow?

HTML content is perfect for slideshows

Magic Slideshow - Integration Guide Gone are the days when slideshows can only display images.

Use HTML to create a plush looking slideshow for your site.

We've gathered some neat ways for you to make your slideshows stand out...

Embed a YouTube video

Embed YouTube, Vimeo and other videos in your slides.

Show tables

Tool Price
Magic Slideshow £25.00 Buy Now
Magic Zoom Plus £45.00 Buy Now
Magic 360 £99.00 Buy Now
Magic Zoom £29.00 Buy Now
Magic Thumb £25.00 Buy Now
Magic Scroll £29.00 Buy Now

Use an HTML table. You can add anything to Magic Slideshow.

Follow us on Facebook...

Lazy Loading

You can configure the slideshow to load images on demand (lazy loading). Set the preload parameter to false and use data-image attribute to specify the URL of the image instead of the src. Example:

<div class="MagicSlideshow" data-options="preload: false;">
    <img data-image="example1.jpg">
    <img data-image="example2.jpg">
    <img data-image="example3.jpg">


You can set the slideshow to pause on hover, on click or onclick of a thumbnail or bullet.

This example pauses the slideshow on hover:

<div class="MagicSlideshow" data-options="pause: hover;">

Multiple slideshows

One page can have many slideshows (as this page does).

If you'd like each slideshow to have different options, use a data-options tag like in all the examples on this page.

If you'd like to set the same options for all slideshows on your page, you might prefer to use MagicSlideshowOptions like so:

<script type="text/javascript">
var MagicSlideshowOptions = {
     'autoplay': true,
     'kenburns': true

To specify different CSS attributes for a particular slideshow, give it a unique ID, for example:

<div class="MagicSlideshow" id="slide-green" data-options="width: 400px; height 187px;">

Use that ID to apply CSS only to that slideshow. This example adds a green border to the slideshow below:

#slide-green .mss-slider {
background: #8FB416;


You can start, stop, refresh and control the slideshow by using the API.

Start Stop Refresh Previous Pause Next

Text captions

You can add captions under each image using data-caption or in a span after the image.

You can add larger text using the title tag, for example:

<div class="MagicSlideshow">
<img src="example1.jpg" data-caption="Descriptive text can go here." title="Title here"/>
<img src="example2.jpg" data-caption="You can have one or two sets of text, or none at all." title="Another title"/>
<img src="example3.jpg" data-caption="You can also use HTML such as<b>bold</b>,<i>italic</i> and<a href='/magicslideshow/'>links</a>."/>

Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide

You can make the text fade or dissolve:

Fade effect:

<div class="MagicSlideshow" data-options="caption-effect: fade;">

Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide

Dissolve effect (the difference is subtle):

<div class="MagicSlideshow" data-options="caption-effect: dissolve;">

Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide Magic Slideshow - Integration Guide

Text style

To change color, font, size and other text styles, edit the CSS file magicslideshow.default.css.

Zoom your slideshow

You can add zoom and enlarge effects to each image in your slideshow by combining Magic Zoom Plus with Magic Slideshow.

Update your file references before your </head> tag. For example:

<link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="magiczoomplus/magiczoomplus.js" type="text/javascript"></script>

<link href="magicslideshow/magicslideshow.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>

window.MagicSlideshowOptions || (window.MagicSlideshowOptions = {});
MagicSlideshowOptions.onready = function(id) {
  if (id=='zoom-slideshow') { MagicZoom.start(); }

<style type="text/css">.mss-slide div { text-align:center; }</style>

Place the following code in the <body> tag of your web page. The example below uses thumbnails:

<div class="MagicSlideshow" data-options="width: 400px; height: 187px; autoplay: false; selectors: bottom; selectors-style: thumbnails;" id="zoom-slideshow">
	<div data-thumb-image="tiny1.jpg"><a href="big1.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small1.jpg"/></a></div>
	<div data-thumb-image="tiny2.jpg"><a href="big2.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small2.jpg"/></a></div>
	<div data-thumb-image="tiny3.jpg"><a href="big3.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small3.jpg"/></a></div>
	<div data-thumb-image="tiny4.jpg"><a href="big4.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small4.jpg"/></a></div>

Your slideshow will look like this:

Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide

If you prefer to use bullets instead of thumbnails, please use this code in your <body> tag:

<div class="MagicSlideshow" data-options="width: 400px; height: 187px; autoplay: false; selectors: bottom; selectors-style: bullets;" id="zoom-slideshow">
	<div><a href="big1.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small1.jpg"/></a></div>
	<div><a href="big2.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small2.jpg"/></a></div>
	<div><a href="big3.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small3.jpg"/></a></div>
	<div><a href="big4.jpg" class="MagicZoom" data-options="autostart:false;"><img src="small4.jpg"/></a></div>
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide
Magic Slideshow - Integration Guide


Use the 23 parameters to make your slideshow look exactly how you want.

The parameters can be applied in two ways - simply add the data-options attribute to a slideshow, like so:

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

or apply your parameters in a script tag with MagicSlideshow.options like so:

<script type="text/javascript">
var MagicSlideshowOptions = {
     'autoplay': true,
     'kenburns': true

Using a script tag will apply the same settings to all slideshows on that page, or across your entire site if placed within your your website template (assuming you have a template/theme).

Be sure not to put a comma after your last tag or Internet Explorer will fail (a long running bug in IE).

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 Direction for slides (left/right or up/down).
arrows true true | false Show navigation arrows on hover.
loop true true | false Continue slideshow after last slide.
effect slide slide | fade | dissolve Slide transition effect.
effect-speed 600 <milliseconds> Transition speed.
kenburns false true | false Ken Burns effect.
autoplay true true | false Autoplay slideshow after initialization
slide-duration 3000 <milliseconds> Length of time to show each slide for.
shuffle false true | false Shuffle the order.
pause false hover | click | selector-click | false Pause the slideshow.
selectors none bottom | top | right | left | none Where to show selectors.
selectors-style bullets bullets | thumbnails Style of selectors.
selectors-size 70 <pixels> | <size>
e.g. selectors-size: 90x60
Size of thumbnails.
selectors-eye true true | false Highlighter for active thumbnail.
caption true true | false Display text on a slide.
caption-effect fade fade | dissolve | fixed Effect when changing captions.
Other settings
fullscreen false true | false Enable full-screen view.
preload true true | false Load images automatically or on demand.
keyboard true true | false Use left / right arrows to change slides.
links _self _self | _blank | _parent | _top | false How to open links on slides.
loader true true | false Show loading icon while downloading.

Credit: photos courtesy of Andrew Tan.