diff --git a/demos/index.html b/demos/index.html
new file mode 100644
index 000000000..7a60b2bbc
--- /dev/null
+++ b/demos/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Swiper demos</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  <h1>Swiper demos</h1>
+
+  <ul>
+    <li><a href="/010-default.html">010-default</a></li>
+    <li><a href="/020-navigation.html">020-navigation</a></li>
+    <li><a href="/030-pagination.html">030-pagination</a></li>
+    <li><a href="/040-pagination-dynamic.html">040-pagination-dynamic</a></li>
+    <li><a href="/050-pagination-progress.html">050-pagination-progress</a></li>
+    <li><a href="/060-pagination-fraction.html">060-pagination-fraction</a></li>
+    <li><a href="/070-pagination-custom.html">070-pagination-custom</a></li>
+    <li><a href="/080-scrollbar.html">080-scrollbar</a></li>
+    <li><a href="/090-vertical.html">090-vertical</a></li>
+    <li><a href="/100-space-between.html">100-space-between</a></li>
+    <li><a href="/110-slides-per-view.html">110-slides-per-view</a></li>
+    <li><a href="/120-slides-per-view-auto.html">120-slides-per-view-auto</a></li>
+    <li><a href="/130-centered.html">130-centered</a></li>
+    <li><a href="/140-centered-auto.html">140-centered-auto</a></li>
+    <li><a href="/145-css-mode.html">145-css-mode</a></li>
+    <li><a href="/150-freemode.html">150-freemode</a></li>
+    <li><a href="/160-scroll-container.html">160-scroll-container</a></li>
+    <li><a href="/170-slides-per-column.html">170-slides-per-column</a></li>
+    <li><a href="/180-nested.html">180-nested</a></li>
+    <li><a href="/190-grab-cursor.html">190-grab-cursor</a></li>
+    <li><a href="/200-infinite-loop.html">200-infinite-loop</a></li>
+    <li><a href="/210-infinite-loop-with-slides-per-group.html">210-infinite-loop-with-slides-per-group</a></li>
+    <li><a href="/211-slides-per-group-skip.html">211-slides-per-group-skip</a></li>
+    <li><a href="/220-effect-fade.html">220-effect-fade</a></li>
+    <li><a href="/230-effect-cube.html">230-effect-cube</a></li>
+    <li><a href="/240-effect-coverflow.html">240-effect-coverflow</a></li>
+    <li><a href="/250-effect-flip.html">250-effect-flip</a></li>
+    <li><a href="/255-effect-cards.html">255-effect-cards</a></li>
+    <li><a href="/257-effect-creative.html">257-effect-creative</a></li>
+    <li><a href="/260-keyboard-control.html">260-keyboard-control</a></li>
+    <li><a href="/270-mousewheel-control.html">270-mousewheel-control</a></li>
+    <li><a href="/280-autoplay.html">280-autoplay</a></li>
+    <li><a href="/290-dynamic-slides.html">290-dynamic-slides</a></li>
+    <li><a href="/300-thumbs-gallery.html">300-thumbs-gallery</a></li>
+    <li><a href="/310-thumbs-gallery-loop.html">310-thumbs-gallery-loop</a></li>
+    <li><a href="/320-multiple-swipers.html">320-multiple-swipers</a></li>
+    <li><a href="/330-hash-navigation.html">330-hash-navigation</a></li>
+    <li><a href="/340-history.html">340-history</a></li>
+    <li><a href="/350-rtl.html">350-rtl</a></li>
+    <li><a href="/360-parallax.html">360-parallax</a></li>
+    <li><a href="/370-lazy-load-images.html">370-lazy-load-images</a></li>
+    <li><a href="/380-responsive-breakpoints.html">380-responsive-breakpoints</a></li>
+    <li><a href="/381-ratio-breakpoints.html">381-ratio-breakpoints</a></li>
+    <li><a href="/390-autoheight.html">390-autoheight</a></li>
+    <li><a href="/400-zoom.html">400-zoom</a></li>
+    <li><a href="/410-virtual-slides.html">410-virtual-slides</a></li>
+    <li><a href="/420-custom-plugin.html">420-custom-plugin</a></li>
+    <li><a href="/430-slideable-menu.html">430-slideable-menu</a></li>
+    <li><a href="/440-change-direction.html">440-change-direction</a></li>
+    <li><a href="/450-watchSlidesVisibility.html">450-watchSlidesVisibility</a></li>
+  </ul>
+</body>
+
+</html>
