diff --git a/examples/src/home.html b/examples/src/home.html
deleted file mode 100644
index 0de63aa..0000000
--- a/examples/src/home.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport"
-        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>js-cloudimage-360-view home addition</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-  <style>
-    .spinner-grow {
-      color: #343a40 !important;
-      display: inline-block;
-      vertical-align: text-bottom;
-      background-color: currentColor;
-      border-radius: 50%;
-      opacity: 0;
-      -webkit-animation: spinner-grow .75s linear infinite;
-      animation: spinner-grow .75s linear infinite;
-      width: 100px;
-      height: 100px;
-      z-index: 1;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-top: -50px;
-      margin-left: -50px;
-    }
-  </style>
-</head>
-
-<body>
-<div class="container">
-  <!-- simply iniatialize it with class name "cloudimage-360", server folder path, file name and amount of images -->
-  <h1><b>js-cloudimage-360-view</b> Home addition</h1>
-
-  <div id="spinner" class="spinner-grow text-dark" role="status"></div>
-
-  <div id="main" style="visibility: hidden;overflow: hidden;">
-    <h3>Indoor</h3>
-    <div
-       class="cloudimage-360"
-       data-folder="https://scaleflex.airstore.io/demo/indoor/"
-       data-filename="{index}.jpeg"
-       data-amount="30"
-       data-magnifier="3"
-       data-responsive="demo"
-       data-ratio="0.5"
-    ></div>
-    <h3>Outdoor</h3>
-    <div
-       class="cloudimage-360"
-       data-folder="https://scaleflex.airstore.io/demo/outdoor/"
-       data-filename="00_Haus_000{index}.jpg"
-       data-amount="30"
-       data-magnifier="3"
-       data-responsive="demo"
-       data-ratio="0.5"
-    ></div>
-  </div>
-</div>
-
-
-<!-- Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag -->
-<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.4.min.js"></script>
-<script>
-  const spinner = document.getElementById('spinner');
-  const wrapper = document.getElementById('main');
-
-  wrapper.style.visibility = 'visible';
-  spinner.style.display = 'none';
-</script>
-</body>
-</html>
diff --git a/examples/src/indoor.html b/examples/src/indoor.html
new file mode 100644
index 0000000..dd803b8
--- /dev/null
+++ b/examples/src/indoor.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <link rel="stylesheet" href="./assets/fonts/helvetica-neue.css">
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+  <link rel="stylesheet" href="./style.css">
+  <style>.on-load {
+    display: none
+  }
+
+  .spinner-grow {
+    color: #343a40 !important;
+    display: inline-block;
+    vertical-align: text-bottom;
+    background-color: currentColor;
+    border-radius: 50%;
+    opacity: 0;
+    -webkit-animation: spinner-grow .75s linear infinite;
+    animation: spinner-grow .75s linear infinite;
+    width: 100px;
+    height: 100px;
+    z-index: 1;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -50px;
+    margin-left: -50px;
+  }
+
+  .github-button {
+    color: transparent;
+  }
+  </style>
+  <style>
+    .cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
+      padding: 8px;
+      background: rgb(244, 244, 244);
+      border: none;
+      border-radius: 4px;
+    }
+
+    .cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
+      outline: none;
+    }
+
+    .cloudimage-360 .cloudimage-360-prev {
+      display: none;
+      position: absolute;
+      z-index: 100;
+      top: calc(50% - 15px);
+      left: 20px;
+    }
+
+    .cloudimage-360 .cloudimage-360-next {
+      display: none;
+      position: absolute;
+      z-index: 100;
+      top: calc(50% - 15px);
+      right: 20px;
+    }
+
+    .cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
+      content: '';
+      display: block;
+      width: 30px;
+      height: 30px;
+      background: 50% 50% / cover no-repeat;
+    }
+
+    .cloudimage-360 .cloudimage-360-prev:before {
+      background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
+    }
+
+    .cloudimage-360 .cloudimage-360-next:before {
+      background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
+    }
+
+    .cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
+      opacity: 0.4;
+      cursor: default;
+    }
+  </style>
+  <title>JS-cloudimage-360-view home addition</title>
+</head>
+
+<body>
+<!-- simply iniatialize it with class name "cloudimage-360", server folder path, file name and amount of images -->
+<div id="spinner" class="spinner-grow text-dark" role="status"></div>
+
+<section id="main" class="wrapper" style="visibility: hidden;overflow: hidden;">
+  <section class="home">
+    <div class="container">
+      <a class="logo" href="https://scaleflex.github.io/js-cloudimage-360-view/">js-cloudimage-360-view</a>
+      <div style="margin-top: 10px;">
+        <a class="github-button" target="_blank"
+           href="https://github.com/Scaleflex/js-cloudimage-360-view/subscription" data-icon="octicon-eye"
+           aria-label="Watch Scaleflex/js-cloudimage-360-view on GitHub">Watch</a>
+        <a class="github-button" target="_blank" href="https://github.com/Scaleflex/js-cloudimage-360-view"
+           data-show-count="true" data-icon="octicon-star" aria-label="Star Scaleflex/js-cloudimage-360-view on GitHub"
+        >Star</a>
+        <a class="github-button" target="_blank" href="https://github.com/Scaleflex/js-cloudimage-360-view/fork"
+           data-icon="octicon-repo-forked" aria-label="Fork Scaleflex/js-cloudimage-360-view on GitHub">Fork</a>
+        <a class="twitter-share-button btn btn-info" target="_blank"
+           href="https://twitter.com/intent/tweet?text=Engage%20your%20customers%20with%20a%20stunning%20360%20viewvof%20your%20products&url=https://scaleflex.github.io/js-cloudimage-360-view/&via=cloudimage&hashtags=images,cloudimage">
+          <i> </i>
+          <span>Tweet</span>
+        </a>
+        <!--<a class="github-button" href="https://github.com/Scaleflex/filerobot-uploader/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download Scaleflex/filerobot-uploader on GitHub">Download</a>-->
+      </div>
+      <h1>Show every detail from any angle</h1>
+      <h2>Home addition: Indoor view</h2>
+
+      <div class="actions-wrapper">
+        <a
+           id="view-github-btn"
+           href="https://github.com/scaleflex/js-cloudimage-360-view"
+           class="btn btn-primary"
+           target="_blank"
+        >View on GitHub</a>
+        <a
+           href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html"
+           class="btn btn-light"
+           target="_blank"
+        >Edit on CodeSandbox</a>
+        <!--<a href="#" class="btn btn-light btn-lg">Read on Medium</a>-->
+      </div>
+    </div>
+
+    <a href="https://github.com/scaleflex/js-cloudimage-360-view" target="_blank">
+      <img
+         class="fork-me-on-github"
+         src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
+         alt="Fork me on GitHub">
+    </a>
+
+    <a href="https://www.filerobot.com/" class="robot-icon">
+      <img style="width:100%;" id="robot-icon"
+           src="https://demo.cloudimg.io/width/800/q35.foil1/https://scaleflex.airstore.io/filerobot/assets/robot-icon-left.png"
+           alt="">
+    </a>
+  </section>
+
+  <section>
+    <div
+       class="cloudimage-360"
+       data-folder="https://scaleflex.airstore.io/demo/indoor/"
+       data-filename="{index}.jpeg"
+       data-amount="30"
+       data-magnifier="3"
+       data-responsive="scaleflex"
+       data-ratio="0.5"
+       data-stop-at-edges
+       data-spin-reverse
+       data-control-reverse
+    >
+      <button class="cloudimage-360-prev"></button>
+      <button class="cloudimage-360-next"></button>
+    </div>
+  </section>
+</section>
+
+<section style="text-align: center;">
+  <div class="container ready-to-start">
+    <h2>Any questions?</h2>
+    <p>
+      Contact us at <a href="mailto:hello@cloudimage.io">hello@cloudimage.io</a>, our experts will be happy to help!
+    </p>
+  </div>
+</section>
+
+<footer>
+  <div style="background: #fff">
+    <section class="container ready-to-start filerobot-ui-family">
+      <div class="row">
+        <div class="col-sm-3 filerobot-ui-family-label" style="max-width: 200px; min-width: 200px;">
+          <h5>Filerobot UI family:</h5>
+        </div>
+        <div class="col-sm-9 filerobot-ui-family-libs" style="max-width: calc(100% - 200px);">
+          <ul>
+            <li><a target="_blank" href="https://github.com/scaleflex/react-cloudimage-responsive">JS Cloudimage
+              Responsive</a></li>
+            <li><a target="_blank" href="https://github.com/scaleflex/react-cloudimage-responsive">React Cloudimage
+              Responsive</a></li>
+            <li><a target="_blank" href="https://github.com/scaleflex/ng-cloudimage-responsive">Angular Cloudimage
+              Responsive</a></li>
+            <li><a target="_blank" href="https://github.com/scaleflex/filerobot-uploader">Uploader</a></li>
+            <li><a target="_blank" href="https://github.com/scaleflex/filerobot-image-editor">Image Editor</a></li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  </div>
+  <hr/>
+  <div class="copyright">
+    <div class="container">
+      <div class="row">
+        <div class="team-desc col-sm-8">
+          <div>Made with ❤ in 2019 in Paris, Munich and Sofia by the Scaleflex team, the guys behind <a
+             href="https://www.cloudimage.io/en/home" target="_blank">Cloudimage.io</a>.
+          </div>
+          <div style="margin-top: 10px;">Powered by <a href="https://www.scaleflex.it/en/home" target="_blank">Scaleflex
+            team</a>.
+            All rights reserved.
+          </div>
+        </div>
+        <div class="footer-menu col-sm-4">
+          <ul>
+            <li><a href="https://github.com/scaleflex/js-cloudimage-360-view" target="_blank">View GitHub</a></li>
+            <li><a href="https://github.com/scaleflex/js-cloudimage-360-view/issues" target="_blank">Current
+              Issues</a>
+            </li>
+            <li><a href="https://github.com/scaleflex/js-cloudimage-360-view#table-of-contents" target="_blank">Documentation</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+<!-- Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag -->
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.1.0/js-cloudimage-360-view.min.js"></script>
+<!--<script src="../../build/js-cloudimage-360-view.min.js"></script>-->
+<script>
+  const spinner = document.getElementById('spinner');
+  const wrapper = document.getElementById('main');
+
+  wrapper.classList.add('active');
+  spinner.style.display = 'none';
+</script>
+</body>
+</html>
diff --git a/examples/src/outdoor.html b/examples/src/outdoor.html
new file mode 100644
index 0000000..b489d79
--- /dev/null
+++ b/examples/src/outdoor.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <link rel="stylesheet" href="./assets/fonts/helvetica-neue.css">
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+  <link rel="stylesheet" href="./style.css">
+  <style>.on-load {
+    display: none
+  }
+
+  .spinner-grow {
+    color: #343a40 !important;
+    display: inline-block;
+    vertical-align: text-bottom;
+    background-color: currentColor;
+    border-radius: 50%;
+    opacity: 0;
+    -webkit-animation: spinner-grow .75s linear infinite;
+    animation: spinner-grow .75s linear infinite;
+    width: 100px;
+    height: 100px;
+    z-index: 1;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -50px;
+    margin-left: -50px;
+  }
+
+  .github-button {
+    color: transparent;
+  }
+  </style>
+  <style>
+    .cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
+      padding: 8px;
+      background: rgb(244, 244, 244);
+      border: none;
+      border-radius: 4px;
+    }
+
+    .cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
+      outline: none;
+    }
+
+    .cloudimage-360 .cloudimage-360-prev {
+      display: none;
+      position: absolute;
+      z-index: 100;
+      top: calc(50% - 15px);
+      left: 20px;
+    }
+
+    .cloudimage-360 .cloudimage-360-next {
+      display: none;
+      position: absolute;
+      z-index: 100;
+      top: calc(50% - 15px);
+      right: 20px;
+    }
+
+    .cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
+      content: '';
+      display: block;
+      width: 30px;
+      height: 30px;
+      background: 50% 50% / cover no-repeat;
+    }
+
+    .cloudimage-360 .cloudimage-360-prev:before {
+      background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
+    }
+
+    .cloudimage-360 .cloudimage-360-next:before {
+      background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
+    }
+
+    .cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
+      opacity: 0.4;
+      cursor: default;
+    }
+  </style>
+  <title>JS-cloudimage-360-view home addition</title>
+</head>
+
+<body>
+<!-- simply iniatialize it with class name "cloudimage-360", server folder path, file name and amount of images -->
+<div id="spinner" class="spinner-grow text-dark" role="status"></div>
+
+<section id="main" class="wrapper" style="visibility: hidden;overflow: hidden;">
+  <section class="home">
+    <div class="container">
+      <a class="logo" href="https://scaleflex.github.io/js-cloudimage-360-view/">js-cloudimage-360-view</a>
+      <div style="margin-top: 10px;">
+        <a class="github-button" target="_blank"
+           href="https://github.com/Scaleflex/js-cloudimage-360-view/subscription" data-icon="octicon-eye"
+           aria-label="Watch Scaleflex/js-cloudimage-360-view on GitHub">Watch</a>
+        <a class="github-button" target="_blank" href="https://github.com/Scaleflex/js-cloudimage-360-view"
+           data-show-count="true" data-icon="octicon-star" aria-label="Star Scaleflex/js-cloudimage-360-view on GitHub"
+        >Star</a>
+        <a class="github-button" target="_blank" href="https://github.com/Scaleflex/js-cloudimage-360-view/fork"
+           data-icon="octicon-repo-forked" aria-label="Fork Scaleflex/js-cloudimage-360-view on GitHub">Fork</a>
+        <a class="twitter-share-button btn btn-info" target="_blank"
+           href="https://twitter.com/intent/tweet?text=Engage%20your%20customers%20with%20a%20stunning%20360%20viewvof%20your%20products&url=https://scaleflex.github.io/js-cloudimage-360-view/&via=cloudimage&hashtags=images,cloudimage">
+          <i> </i>
+          <span>Tweet</span>
+        </a>
+        <!--<a class="github-button" href="https://github.com/Scaleflex/filerobot-uploader/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download Scaleflex/filerobot-uploader on GitHub">Download</a>-->
+      </div>
+      <h1>Show every detail from any angle</h1>
+      <h2>Home addition: Outdoor view</h2>
+
+
+      <div class="actions-wrapper">
+        <a
+           id="view-github-btn"
+           href="https://github.com/scaleflex/js-cloudimage-360-view"
+           class="btn btn-primary"
+           target="_blank"
+        >View on GitHub</a>
+        <a
+           href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html"
+           class="btn btn-light"
+           target="_blank"
+        >Edit on CodeSandbox</a>
+        <!--<a href="#" class="btn btn-light btn-lg">Read on Medium</a>-->
+      </div>
+    </div>
+
+    <a href="https://github.com/scaleflex/js-cloudimage-360-view" target="_blank">
+      <img
+         class="fork-me-on-github"
+         src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
+         alt="Fork me on GitHub">
+    </a>
+
+    <a href="https://www.filerobot.com/" class="robot-icon">
+      <img style="width:100%;" id="robot-icon"
+           src="https://demo.cloudimg.io/width/800/q35.foil1/https://scaleflex.airstore.io/filerobot/assets/robot-icon-left.png"
+           alt="">
+    </a>
+  </section>
+
+  <section>
+    <div
+       class="cloudimage-360"
+       data-folder="https://scaleflex.airstore.io/demo/outdoor/"
+       data-filename="00_Haus_000{index}.jpg"
+       data-amount="30"
+       data-magnifier="3"
+       data-responsive="scaleflex"
+       data-ratio="0.5"
+       data-stop-at-edges
+       data-spin-reverse
+       data-control-reverse
+    >
+      <button class="cloudimage-360-prev"></button>
+      <button class="cloudimage-360-next"></button>
+    </div>
+  </section>
+</section>
+
+<section style="text-align: center;">
+  <div class="container ready-to-start">
+    <h2>Any questions?</h2>
+    <p>
+      Contact us at <a href="mailto:hello@cloudimage.io">hello@cloudimage.io</a>, our experts will be happy to help!
+    </p>
+  </div>
+</section>
+
+<footer>
+  <div style="background: #fff">
+    <section class="container ready-to-start filerobot-ui-family">
+      <div class="row">
+        <div class="col-sm-3 filerobot-ui-family-label" style="max-width: 200px; min-width: 200px;">
+          <h5>Filerobot UI family:</h5>
+        </div>
+        <div class="col-sm-9 filerobot-ui-family-libs" style="max-width: calc(100% - 200px);">
+          <ul>
+            <li><a target="_blank" href="https://github.com/scaleflex/react-cloudimage-responsive">JS Cloudimage
+              Responsive</a></li>
+            <li><a target="_blank" href="https://github.com/scaleflex/react-cloudimage-responsive">React Cloudimage
+              Responsive</a></li>
+            <li><a target="_blank" href="https://github.com/scaleflex/ng-cloudimage-responsive">Angular Cloudimage
+              Responsive</a></li>
+            <li><a target="_blank" href="https://github.com/scaleflex/filerobot-uploader">Uploader</a></li>
+            <li><a target="_blank" href="https://github.com/scaleflex/filerobot-image-editor">Image Editor</a></li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  </div>
+  <hr/>
+  <div class="copyright">
+    <div class="container">
+      <div class="row">
+        <div class="team-desc col-sm-8">
+          <div>Made with ❤ in 2019 in Paris, Munich and Sofia by the Scaleflex team, the guys behind <a
+             href="https://www.cloudimage.io/en/home" target="_blank">Cloudimage.io</a>.
+          </div>
+          <div style="margin-top: 10px;">Powered by <a href="https://www.scaleflex.it/en/home" target="_blank">Scaleflex
+            team</a>.
+            All rights reserved.
+          </div>
+        </div>
+        <div class="footer-menu col-sm-4">
+          <ul>
+            <li><a href="https://github.com/scaleflex/js-cloudimage-360-view" target="_blank">View GitHub</a></li>
+            <li><a href="https://github.com/scaleflex/js-cloudimage-360-view/issues" target="_blank">Current
+              Issues</a>
+            </li>
+            <li><a href="https://github.com/scaleflex/js-cloudimage-360-view#table-of-contents" target="_blank">Documentation</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+<!-- Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag -->
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.1.0/js-cloudimage-360-view.min.js"></script>
+<!--<script src="../../build/js-cloudimage-360-view.min.js"></script>-->
+<script>
+  const spinner = document.getElementById('spinner');
+  const wrapper = document.getElementById('main');
+
+  wrapper.classList.add('active');
+  spinner.style.display = 'none';
+</script>
+</body>
+</html>
