chore: test Swiper

DissNik · Nov 12, 2023 · 689a56f · 689a56f
1 parent 106b7b4
commit 689a56f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 43 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -13,52 +13,47 @@ import.meta.glob(["../images/**", "../fonts/**"])
 
 window.Alpine = Alpine
 
-/* Document ready */
-document.addEventListener("DOMContentLoaded", () => {
-    console.log('Init Swiper')
-	const testimonialsSwiper = new Swiper(".testimonials-slider", {
-		modules: [Navigation],
-		slidesPerView: 1,
-		spaceBetween: 20,
-		navigation: {
-			prevEl: ".testimonials-navigation .swiper-button-prev",
-			nextEl: ".testimonials-navigation .swiper-button-next",
-		},
-		watchSlidesProgress: true,
-		grabCursor: true,
-		breakpoints: {
-			375: {
-				slidesPerView: 1.1,
-				spaceBetween: 20,
-			},
-			720: {
-				slidesPerView: 1.25,
-				spaceBetween: 30,
-			},
-			960: {
-				slidesPerView: 2.25,
-				spaceBetween: 30,
-			},
-			1140: {
-				slidesPerView: 2.5,
-				spaceBetween: 40,
-			},
-			1550: {
-				slidesPerView: 3,
-				spaceBetween: 40,
-			},
-		},
-	})
-})
-
 /* Alpine.js */
 document.addEventListener("alpine:init", () => {
 	Alpine.data("featureSlider", () => ({
+        testimonialsSwiper: null,
 		sliderValue: 0,
-		toggleSlider() {
-			this.sliderValue = this.$el.value
-			this.$refs.featureSliderWrapper.style = `--slider-pos: ${this.sliderValue}%;`
-		},
+
+        init() {
+            this.testimonialsSwiper = new Swiper(this.$el, {
+                modules: [Navigation],
+                slidesPerView: 1,
+                spaceBetween: 20,
+                navigation: {
+                    prevEl: ".testimonials-navigation .swiper-button-prev",
+                    nextEl: ".testimonials-navigation .swiper-button-next",
+                },
+                watchSlidesProgress: true,
+                grabCursor: true,
+                breakpoints: {
+                    375: {
+                        slidesPerView: 1.1,
+                        spaceBetween: 20,
+                    },
+                    720: {
+                        slidesPerView: 1.25,
+                        spaceBetween: 30,
+                    },
+                    960: {
+                        slidesPerView: 2.25,
+                        spaceBetween: 30,
+                    },
+                    1140: {
+                        slidesPerView: 2.5,
+                        spaceBetween: 40,
+                    },
+                    1550: {
+                        slidesPerView: 3,
+                        spaceBetween: 40,
+                    },
+                },
+            })
+        },
 	}))
 })
 

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -688,7 +688,7 @@ public function fields(): array
                 </div>
             </div>
             <!-- /.testimonials-heading -->
-            <div class="testimonials-slider swiper">
+            <div class="testimonials-slider swiper" x-data="featureSlider">
                 <div class="swiper-wrapper">
                     <div class="swiper-slide">
                         <div class="testimonials-item">