Fix slider on homepage

coq · Jan 16, 2025 · 4f6c7d5 · 4f6c7d5
1 parent 5bbd1ff
commit 4f6c7d5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 26 deletions.
diff --git a/src/rocqproverorg_frontend/css/styles.css b/src/rocqproverorg_frontend/css/styles.css
@@ -83,8 +83,14 @@ body.dark {
   max-width: 100vw;
 }
 
-.swiper-bullet-active {
-  background-color: #C24F1E !important;
+.swiper-pagination-bullet-active {
+    background-color: #ff540a !important;
+}
+
+.swiper-pagination-bullet {
+    background-color: #e9e9e94d !important;
+    border: 1px solid #ff540a6e;
+    opacity: 1 !important;
 }
 
 .swiper-separator_30 {

diff --git a/src/rocqproverorg_frontend/pages/home.eml b/src/rocqproverorg_frontend/pages/home.eml
@@ -160,12 +160,6 @@ Layout.render
           <img class="h-8 hidden dark:inline" src="<%s Rocqproverorg_static.Asset.url "logos/darkmode/bluerock.svg" %>" alt="BlueRock"/>
         </a>
       </div>
-      <div class="mx-4 my-4 py-4 px-4">
-        <a href="https://certik.com">
-        <img class="h-8 dark:hidden" src="<%s Rocqproverorg_static.Asset.url "logos/lightmode/ctk-black.svg" %>" alt="CertiK"/>
-        <img class="h-8 hidden dark:inline" src="<%s Rocqproverorg_static.Asset.url "logos/darkmode/ctk-white.svg" %>" alt="CertiK"/>
-        </a>
-      </div>
       <div class="mx-4 my-4 py-4 px-4">
         <a href="https://formalv.com">
           <img class="h-8 dark:hidden" src="<%s Rocqproverorg_static.Asset.url "logos/lightmode/formalv_logo.svg" %>" alt="Formal Vindication"/>
@@ -272,7 +266,7 @@ Layout.render
           </div>
           <!--<div class="lg:flex-1 lg:mt-0 mt-10 flex justify-center" style="max-width: calc(50vw - 5rem);">  Other fix max width calculation-->
           <div class="lg:flex-1 lg:mt-0 mt-10 flex justify-center max-w-xl">
-            <div style="--swiper-navigation-color: #fff;--swiper-pagination-color: #fff;" class="swiper mySwiper_simple">
+            <div class="swiper mySwiper">
               <div class="swiper-wrapper">
                 <div class="swiper-slide">
                   <div>
@@ -311,6 +305,7 @@ Layout.render
                   </div>
                 </div>
               </div>
+              <div class="swiper-pagination"></div>
             </div>
           </div>
         </div>
@@ -366,9 +361,23 @@ Layout.render
               </p>
             </div>
           </div>
-          <div class="lg:flex-1 lg:mt-0 mt-10 flex justify-center">
-            <img src="<%s Rocqproverorg_static.Asset.url "img/home/perf.png" %>" alt="">
-          </div>
+
+          <div class="lg:flex-1 lg:mt-0 mt-10 flex justify-center max-w-xl">
+            <div class="swiper mySwiper">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                  <div class="lg:flex-1 lg:mt-0 mt-10 flex justify-center">
+                    <img src="<%s Rocqproverorg_static.Asset.url "img/home/perf.png" %>" alt="perf">
+                  </div>
+                </div>
+                <div class="swiper-slide">
+                  <div class="lg:flex-1 lg:mt-0 mt-10 flex justify-center">
+                    <img src="<%s Rocqproverorg_static.Asset.url "img/home/perf2.png" %>" alt="profiler">
+                  </div>
+                </div>
+              </div>
+              <div class="swiper-pagination"></div>
+            </div>
         </div>
       </div>
     </div>
@@ -559,23 +568,25 @@ Layout.render
 </div>
 <script>
   var swiper = new Swiper(".mySwiper", {
-    loop: true,
     autoHeight: true,
-    autoplay: {
-      delay: 5000,
-      disableOnInteraction: false,
-    },
-    slidesPerView: 'auto',
-    spaceBetween: 10
-  });
-  var swiper_simple = new Swiper(".mySwiper_simple", {
-    loop: false,
-    autoHeight: true,
-    autoplay: {
-      delay: 5000,
+    autoplay : {
+      delay: 99999999,
       disableOnInteraction: true,
     },
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true
+    },
     slidesPerView: 1,
-    spaceBetween: 10,
+    spaceBetween: 0,
+    breakpoints: {
+      768: {
+        autoHeight: false,
+        autoplay: {
+          delay: 5000,
+          disableOnInteraction: true,
+        },
+      }
+    }
   });
 </script>