Swiper

css/style.css

@@ -2941,26 +2941,27 @@ swiper-container {
 }
 
 swiper-slide {
-    width: 250px !important;
-    height: 430px !important;
+    /* width: 250px !important;
+    height: 430px !important; */
 }
 
 .swiper_card {
-    background-color: #ffffff;
+    background-color: #000000;
     border-radius: 16px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 250px !important;
+    height: 230px !important; 
     padding: 10px;
+    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    align-items: center; */
 }
 
 .card-img {
-    width: 230px;
-    height: 230px;
+    width: 100%;
+    height: 100px;
     border-radius: 8px;
-    object-fit: none;
 }
 
 .swipercard-title {
@@ -4651,6 +4652,43 @@ html[dir=rtl] .pay h1 {
     padding: 5px
 }
 
+.gallerys {
+    display: flex;
+    overflow-x: auto; /* 'auto' instead of 'scroll', but both should work */
+    scroll-behavior: smooth;
+    width: 900px; /* Ensure this width matches the content */
+}
+
+.gallerys div {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr); /* Ensures three equal columns */
+    grid-gap: 20px;
+    padding: 10px;
+    flex: none;
+}
+
+.gallerys div img {
+    width: 100%;
+}
+
+.gallery_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10% auto;
+}
+
+#backBtn, #nextBtn {
+    width: 50px;
+    cursor: pointer;
+    margin: 40px;
+}
+
+.gallerys::-webkit-scrollbar {
+    display: none;
+}
+
+
 /* End Last section */
 
 
@@ -7017,4 +7055,3 @@ td {
     text-align: start;
 
 }
-

index.html

@@ -377,7 +377,7 @@ <h2 > Explore Our Student Projects </h2>
     <p>More than <span>+25,000</span> project Finished by Our Developer</p>
   </div>
   </div>
-<swiper-container class="mySwiper" slides-per-view="5" centered-slides="false" loop="true" space-between="30"  >
+<!-- <swiper-container class="mySwiper" slides-per-view="5" centered-slides="false" loop="true" space-between="30"  >
 <swiper-slide>
   <div class="swiper_card">
     <img src="./images/aboutimg.webp" alt="Description of the image" class="card-img">
@@ -427,7 +427,7 @@ <h6 class="swipercard-title">Meet your Glide Certified Community</h6>
                   <p class="card-description">Last month we announced Glide’s first level of </p>
                 </div> 
                 </swiper-slide>
-</swiper-container>
+</swiper-container> -->
 <div class="button-items" >
   <i class="fa-solid fa-chevron-left" ></i>
   <div class="contactButton">
@@ -1014,7 +1014,30 @@ <h3>Iterate,</h3>
       </div>
     </div>
 
-        <div class="mySwiper" slides-per-view="5" centered-slides="false" loop="true" space-between="30">
+    <div class="gallery_wrap">
+      <img src="./images/back.png" id="backBtn" alt="">
+      <div class="gallerys">
+        <div>
+          <span><img src="./images/child.webp" alt=""></span>
+          <span><img src="./images/child.webp" alt=""></span>
+          <span><img src="./images/child.webp" alt=""></span>      
+        </div>
+        <div>
+          <span><img src="./images/child.webp" alt=""></span>
+          <span><img src="./images/child.webp" alt=""></span>
+          <span><img src="./images/child.webp" alt=""></span>      
+        </div>
+        <div>
+          <span><img src="./images/child.webp" alt=""></span>
+          <span><img src="./images/child.webp" alt=""></span>
+          <span><img src="./images/child.webp" alt=""></span>      
+        </div>
+       </div>
+      <img src="./images/next.png" id="nextBtn" alt="">
+    </div>
+
+
+        <!-- <div class="mySwiper" slides-per-view="5" centered-slides="false" loop="true" space-between="30">
             <div class="swiper-wrapper">
 		                        <div class="swiper-slide">
 
@@ -1071,7 +1094,7 @@ <h6 class="swiper_title">Meet your Glide Certified Community</h6>
       </div>
       
             </div>
-        </div>
+        </div> -->
 
 
       <a href="./viewMore.html">
@@ -1334,5 +1357,25 @@ <h2>Payment Methods</h2>
     },
   });
   </script>
+
+  <script>
+    let scrollContainer = document.querySelector(".gallerys");
+    let backBtn = document.getElementById("backBtn");
+    let nextBtn = document.getElementById("nextBtn");
+
+    scrollContainer.addEventListener("Wheel", (evt) => {
+      evt.preventDefault();
+      scrollContainer.scrollLeft += evt.deltaY;
+    });
+
+    nextBtn.addEventListener("click", ()=> {
+      scrollContainer.style.scrollBehavior = "smooth"
+      scrollContainer.scrollLeft += 900;
+    });
+    backBtn.addEventListener("click", ()=> {
+      scrollContainer.style.scrollBehavior = "smooth"
+      scrollContainer.scrollLeft -= 900;
+    });
+  </script>
 </body>
 </html>