Initial commit

2023-07-26 08:28:13 -05:00
commit 8ce210f27c
1207 changed files with 36066 additions and 0 deletions
@@ -0,0 +1,83 @@
+<div >
+    <!-- CSS -->
+<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
+    <main class="  text-white flex items-center justify-center py-2" x-data="carouselFilter()">
+        <div class="container grid grid-cols-1">
+         
+          
+          <div class="row-start-2 col-start-1"
+               x-show="active == 0"
+               x-transition:enter="transition ease-out duration-300"
+               x-transition:enter-start="opacity-0 transform scale-90"
+               x-transition:enter-end="opacity-100 transform scale-100"
+               x-transition:leave="transition ease-in duration-300"
+               x-transition:leave-start="opacity-100 transform scale-100"
+               x-transition:leave-end="opacity-0 transform scale-90"
+          >
+            <div class="grid grid-cols-1 grid-rows-1" x-data="carousel()" x-init="init()">
+              
+      
+      
+              <div class="carousel col-start-1 row-start-1" x-ref="carousel" >
+                @php
+                $n=0;
+                @endphp
+                @foreach ($promociones as $promocion)
+                <div class=" px-3  ">
+                    
+                        <img
+                      src="{{asset($promocion->slider)}}"
+                      loading="lazy" class=" object-cover drop-shadow-lg  h-[150px]     xl:h-[350px] sm:h-[150px]  md:h-[300px]   lg:h-[300px]  w-full object-center rounded-lg sm:rounded-3xl m-2 ">
+                    
+                    
+                  </div>
+                @php
+                $n++;
+                @endphp
+                @endforeach
+                
+              </div>
+            </div>
+          </div>
+          
+          
+       
+          
+        </div>
+      </main>
+
+
+
+      <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
+      <script>
+        function carousel() {
+        return {
+          active: 0,
+          init() {
+            var flkty = new Flickity(this.$refs.carousel, {
+              wrapAround: true,
+              autoPlay:true
+            });
+            flkty.on('change', i => this.active = i);
+          }
+        }
+      }
+      
+      function carouselFilter() {
+        return {
+          active: 0,
+          changeActive(i) {
+            this.active = i;
+            
+            this.$nextTick(() => {
+              let flkty = Flickity.data( this.$el.querySelectorAll('.carousel')[i] );
+              flkty.resize();
+              
+              console.log(flkty);
+            });
+          }
+        }
+      }
+      </script>
+      
+</div>