added slider

anshxika · Nov 30, 2024 · 991d3bd · 991d3bd
1 parent 7b63677
commit 991d3bd
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/css files/style.css b/css files/style.css
@@ -137,7 +137,7 @@ body {
 .carousel-container h2 {
     text-align: center;
     font-size: 2.2em;
-    padding-top: 4%;
+    padding-top: 7%;
     font-family: 'DynaPuff';
     margin-bottom: 3.5%;
 }
@@ -196,13 +196,32 @@ body {
     cursor: pointer;
 }
 
-.swipe-btn {
-    padding: 50% 120px;
-    color: #000;
+/* Target the Swiper navigation arrows */
+.swiper-button-next, .swiper-button-prev {
+    width: 40px;                  
+    height: 40px;                 
+    background-color: transparent;
+    padding: 5px;                 
+    border-radius: 50%;           
+    box-shadow: none;             
+    z-index: 10;                  
 }
-.swipe-btn::after{
-    padding: 50% 120px;
-    color: #000;
+
+/* Adjust arrow icon size */
+.swiper-button-next::after, .swiper-button-prev::after {
+    font-size: 10px;              
+    color: #333;                 
+}
+
+/* Fine-tune positioning if needed */
+.carousel-container {
+    position: relative;          
+}
+
+.swiper-button-next, .swiper-button-prev {
+    position: absolute;           
+    top: 50%;                     
+    transform: translateY(-50%);  
 }
 
 /* Footer */
@@ -217,12 +236,15 @@ body {
 /* Responsive */
 @media (max-width: 768px) {
     .navbar {
-        flex-direction: column;
         text-align: center;
+        padding: 5px 20px;
     }
 
     .slider-container {
         flex-direction: column;
     }
+    .swipe-btn{
+        padding: 100% 20px;
+    }
 }
 
diff --git a/index.html b/index.html
@@ -104,8 +104,6 @@ <h3>Masala Maggie</h3>
         <div class="swipe-btn swiper-button-prev"></div>
 </div>
 
-
-
 <!-- Footer -->
 <div id="footer"></div>
 <script>