Buy now Get support

All the files you need are contained in the magicslideshow folder within the zip file you downloaded.

  1. Upload the magicslideshow folder to your server.
  2. Reference the magicslideshow.js and magicslideshow.css files before your </head> tag. Example:

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

  3. Create a div with the class MagicSlideshow.
  4. Place your images in the div. Example:

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


Customize your slideshow with these options. Specify your parameters in JavaScript, for example:

<script type="text/javascript">
    MagicSlideshow.options = {

Or, you can configure slideshow via data-options attribute, for example:

<div class="MagicSlideshow" data-options="effect: fade; slide-duration: 4000; shuffle: true;"></div>

More detailed installation instructions are on our website. If you get stuck, contact us.