Glider

Getting Started

Glider - is a simple slider script that automatically animates layers of a still imagery for creating an illusion of 3D. It pans and zooms a photo in any direction to achieve Ken Burns 3D effect.

You can also use any html elements as layers like div with a text and buttons.

Preparing layers

For creating 3D slides you need to break your photo into layers. You can do it easily in editors like Adobe Photoshop. When you purchase slider script you also get a video tutorial about creating layers in Photoshop. We also can create images for you for the reasonable price. If you need it contact us by email support@bukza.com.

Constructor

In the archive you will also get a visual constructor for creating your own slideshows. It is simple to use and will show you the result of your work and code ready to paste in your webpage.

To run the constructor just open constructor\index.html file from the pack.

Manual setup

Basically you will need to add this minimal code to your page and the slider will start to work:

<html>
   <body>
       <div id="slider">
           <div data-zoom="1.5">
               <img src="images/slide1/1.png" />
               <img src="images/slide1/2.png" />
               <img src="images/slide1/3.png" />
           </div>
           <div data-zoom="1.3">
               <img src="images/slide2/1.png" />
               <img src="images/slide2/2.png" />
               <img src="images/slide2/3.png" />
           </div>
       </div>
   <script src="glider.min.js"></script>
   <script>
       document.addEventListener('DOMContentLoaded',
           function () {
               new Glider(document.getElementById('slider'));
           });
       </script>
   </body>
</html>

To get a more sophisticated configuration use the build-in slider constructor or read next sections of this documentation.

Including files →