Materialize CSS🌈 [11.- Slide (Carousel)]

Video: https://youtu.be/xxJ6C86JxHg
programadornovato · Aug 16, 2019 · 4cadc2b · 4cadc2b
1 parent d56a659
commit 4cadc2b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 48 deletions.
diff --git a/images/avs1.jpg b/images/avs1.jpg
diff --git a/images/avs2.jpg b/images/avs2.jpg
diff --git a/images/avs3.jpg b/images/avs3.jpg
diff --git a/index.html b/index.html
@@ -15,58 +15,38 @@
 </head>
 
 <body>
-
-    <div class="navbar-fixed">
-        <nav class="nav-wrapper blue">
-            <div class="container">
-
-                <a href="#" class="brand-logo">
-                    <img src="images/pn.png" height="50" style="vertical-align: middle;" class="circle z-depth-2">
-                </a>
-                <ul class="right hide-on-med-and-down">
-                    <li><a href="#">Link 1</a></li>
-                    <li><a href="#">Link 2</a></li>
-                    <li><a href="#">Link 3</a></li>
-                    <li>
-                        <a href="#" class="dropdown-trigger" data-target="menu_drop">
-                            Seleccionar
-                            <i class="material-icons right">arrow_drop_down</i>
-                        </a>
-                    </li>
-                </ul>
-                <a href="#" data-target="responsive-menu" class="sidenav-trigger right">
-                    <i class="material-icons">menu</i>
-                </a>
-            </div>
-        </nav>
+    <div class="carousel carousel-slider">
+        <a href="#" class="carousel-item">
+            <img src="images/avs1.jpg">
+        </a>
+        <a href="#" class="carousel-item">
+            <img src="images/avs2.jpg">
+        </a>
+        <a href="#" class="carousel-item">
+            <img src="images/avs3.jpg">
+        </a>
     </div>
-    <ul id="menu_drop" class="dropdown-content">
-        <li><a href="#">Sub menu 1</a></li>
-        <li><a href="#">Sub menu 2</a></li>
-        <li><a href="#">Sub menu 3</a></li>
-    </ul>
-    <ul id="menu_sub_drop" class="dropdown-content">
-        <li><a href="#">Sub menu 1</a></li>
-        <li><a href="#">Sub menu 2</a></li>
-        <li><a href="#">Sub menu 3</a></li>
-    </ul>
-    <ul id="responsive-menu" class="sidenav">
-        <li><a href="#">Link 1</a></li>
-        <li><a href="#">Link 2</a></li>
-        <li><a href="#">Link 3</a></li>
-        <li>
-            <a href="#" class="dropdown-trigger" data-target="menu_sub_drop">
-                Seleccionar
-                <i class="material-icons right">arrow_drop_down</i>
-            </a>
-        </li>
-    </ul>
-    <div class="red" style="height: 700px;"></div>
-    <div class="green" style="height: 700px;"></div>
     <!-- Compiled and minified JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
     <script>
-        M.AutoInit();
+        var options={
+            duration:100,
+            dist:-100,
+            shift:0,
+            padding:100,
+            numVisible:3,
+            fullWidth:true,
+            indicators:true,
+            noWrap:true,
+            onCycleTo:function(){
+                console.log("hola slide");
+            }
+        };
+        document.addEventListener('DOMContentLoaded', function () {
+            var elems = document.querySelectorAll('.carousel');
+            var instances = M.Carousel.init(elems, options);
+        });
+        //M.AutoInit();
     </script>
 </body>