Merge pull request Pallavi1926#31 from monishkumardvs/fix-/auto-scroll

Fix /auto scroll
Arghya-Chakraborty0812 · Oct 1, 2024 · 7f20c4c · 7f20c4c
2 parents b4831f1 + 6b997d8
commit 7f20c4c
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,8 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="style.css">
-  <title>FitPhysique</title>
+   <title>FitPhysique</title>
+
 </head>
 
 <body>
@@ -273,55 +274,74 @@ <h3><sup>$</sup>60<span>/month</span></h3>
   </section>
 
   <section class="section__container client__container" id="client">
-    <h2 class="section__header">OUR TESTIMONIALS</h2>
-    <!-- Slider main container -->
-    <div class="swiper">
-      <!-- Additional required wrapper -->
-      <div class="swiper-wrapper">
-        <!-- Slides -->
-        <div class="swiper-slide">
-          <div class="client__card">
-            <img src="assets/client-1.jpg" alt="client" />
-            <div><i class="ri-double-quotes-r"></i></div>
-            <p>
-              I've been a member at FitPhysique for over a year now, and I
-              couldn't be happier with my experience. The range of classes
-              offered here is impressive - from high-energy cardio sessions to
-              relaxing yoga classes, there's something for everyone.
-            </p>
-            <h4>Sarah Johnson</h4>
+    <section class="section__container client__container" id="client">
+      <h2 class="section__header">OUR TESTIMONIALS</h2>
+      <div class="swiper">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <div class="client__card">
+              <img src="assets/client-1.jpg" alt="client" />
+              <div><i class="ri-double-quotes-r"></i></div>
+              <p>
+                I've been a member at FitPhysique for over a year now, and I
+                couldn't be happier with my experience. The range of classes
+                offered here is impressive - from high-energy cardio sessions to
+                relaxing yoga classes, there's something for everyone.
+              </p>
+              <h4>Sarah Johnson</h4>
+            </div>
           </div>
-        </div>
-        <div class="swiper-slide">
-          <div class="client__card">
-            <img src="assets/client-2.jpg" alt="client" />
-            <div><i class="ri-double-quotes-r"></i></div>
-            <p>
-              The classes are always well-planned and engaging, and the
-              instructors do an excellent job of keeping us motivated
-              throughout. I'm so grateful to have found such a supportive and
-              inclusive gym.
-            </p>
-            <h4>Michael Wong</h4>
+          <div class="swiper-slide">
+            <div class="client__card">
+              <img src="assets/client-2.jpg" alt="client" />
+              <div><i class="ri-double-quotes-r"></i></div>
+              <p>
+                The classes are always well-planned and engaging, and the
+                instructors do an excellent job of keeping us motivated
+                throughout. I'm so grateful to have found such a supportive and
+                inclusive gym.
+              </p>
+              <h4>Michael Wong</h4>
+            </div>
           </div>
-        </div>
-        <div class="swiper-slide">
-          <div class="client__card">
-            <img src="assets/client-3.jpg" alt="client" />
-            <div><i class="ri-double-quotes-r"></i></div>
-            <p>
-              I've tried many gyms in the past, but none of them compare to
-              FitPhysique. From the moment I walked through the doors, I felt
-              welcomed and supported by the staff and fellow members alike.
-            </p>
-            <h4>Emily Davis</h4>
+          <div class="swiper-slide">
+            <div class="client__card">
+              <img src="assets/client-3.jpg" alt="client" />
+              <div><i class="ri-double-quotes-r"></i></div>
+              <p>
+                I've tried many gyms in the past, but none of them compare to
+                FitPhysique. From the moment I walked through the doors, I felt
+                welcomed and supported by the staff and fellow members alike.
+              </p>
+              <h4>Emily Davis</h4>
+            </div>
           </div>
         </div>
+        <div class="swiper-pagination">
+            <span class="swiper-pagination-bullet"></span>
+            <span class="swiper-pagination-bullet"></span>
+            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
+        </div>
       </div>
-      <!-- If we need pagination -->
-      <div class="swiper-pagination"></div>
-    </div>
-  </section>
+    </section>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
+
+
+    <script>
+      const swiper = new Swiper('.swiper', {
+        loop: true,
+        autoplay: {
+          delay: 3000, 
+          disableOnInteraction: false,
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
+      });
+    </script>
 
   <section class="blog" id="blog">
     <div class="section__container blog__container">
@@ -481,8 +501,8 @@ <h4>NEWSLETTER</h4>
       Copyright © 2024 Web Design Mastery. All rights reserved.
     </div>
   </footer>
-
-
+  
+  
 
   <script src="https://unpkg.com/scrollreveal"></script>
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

diff --git a/style.css b/style.css
@@ -13,7 +13,6 @@
 
 * {
   padding: 0;
-  margin: 0;
   box-sizing: border-box;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,6 @@ @@
     * {
       padding: 0;
-      margin: 0;
       box-sizing: border-box;
     }
@@ Expand Down @@