studypress ready for review

css/index.css

@@ -22,7 +22,7 @@ main {
 }
 
 section {
-  padding: 5rem 0;
+  padding: 5rem 0 3.5rem;
   margin: unset;
 }
 
@@ -50,6 +50,9 @@ h1, h2, h3, h4, h5, h6, p {
   margin-bottom: 1rem;
   font-size: 2.2rem;
 }
+.section-title strong {
+  color: rgb(0, 38, 136);
+}
 
 .section-sub-title {
   color: rgba(0, 0, 0, 0.6);
@@ -582,9 +585,20 @@ h1, h2, h3, h4, h5, h6, p {
 #new-course .section-title, #new-course .section-sub-title {
   text-align: left;
 }
-#new-course .new-course-slider {
+#new-course .new-course {
   padding: 1rem 0;
 }
+#new-course .slider-buttons {
+  margin-top: 0.5rem;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+#new-course .slider-buttons .new-course-prev, #new-course .slider-buttons .new-course-next {
+  padding: 0.25rem 0.75rem;
+  background: rgb(0, 38, 136);
+  border: none;
+}
 
 #app-download {
   font-family: "Noto Serif Bengali", serif;

css/index.sass

@@ -196,9 +196,20 @@
     .section-title, .section-sub-title
         text-align: left
 
-    .new-course-slider
+    .new-course
         padding: 1rem 0
 
+    .slider-buttons
+        margin-top: .5rem
+        display: flex
+        justify-content: center
+        gap: 1rem
+
+        .new-course-prev, .new-course-next
+            padding: .25rem .75rem
+            background: $primaryColor
+            border: none
+
 
 // app-download
 #app-download

index.html

@@ -544,7 +544,7 @@
                 </p>
 
                 <!-- new-course-slider slider -->
-                <div class="swiper new-course-slider">
+                <div class="swiper new-course">
                     <div class="swiper-wrapper">
 
                         <div class="swiper-slide single-course">
@@ -755,6 +755,14 @@
 
                     </div>
                 </div>
+                <div class="slider-buttons">
+                    <div class="new-course-prev">
+                        <i class="fa-solid fa-chevron-left"></i>
+                    </div>
+                    <div class="new-course-next">
+                        <i class="fa-solid fa-chevron-right"></i>
+                    </div>
+                </div>
 
             </div>
         </section>

js/custom.js

@@ -47,8 +47,8 @@ var swiper = new Swiper(".why-slider-1", {
     loop: true,
     speed: 5000,
     autoplay: {
-        delay: 0,
-        pauseOnMouseEnter: true,
+        delay: 1,
+        pauseOnMouseEnter: false,
         reverseDirection: true
       },
     spaceBetween: 20,
@@ -56,16 +56,16 @@ var swiper = new Swiper(".why-slider-1", {
 
 
 // new course  slider
-var swiper = new Swiper(".new-course-slider", {
-    spaceBetween: 30,
+var swiper = new Swiper(".new-course", {
     loop: true,
     spaceBetween: 10,
-    autoHeight: true,
-    allowTouchMove: true,
-    slidesPerView: 1,
+    // slidesPerView: 1,
+    speed: 3000,
     autoplay: {
-        delay: 0,
-        pauseOnMouseEnter: false,
+      delay: 0,
+      pauseOnMouseEnter: true,
+      disableOnInteraction: false,
+      reverseDirection: true,  
     },
     breakpoints: {
         640: {
@@ -81,6 +81,10 @@ var swiper = new Swiper(".new-course-slider", {
             spaceBetween: 30,
         },
       },
+      navigation: {
+        nextEl: ".new-course-next",
+        prevEl: ".new-course-prev",
+      },
       
 });