swiper - disable autoplay, add arrows

assets/css/src/search.css

@@ -6,18 +6,23 @@
 }
 
 .search-form {
+  position: relative;
   width: fit-content;
   margin: auto;
 }
 
 .search-input {
   border-bottom: var(--border);
-  width: 40vw;
+  width: max(16rem, 40vw);
   margin-right: 2rem;
   padding: 0.3rem 0.5rem;
   font-size: var(--font-size-h2);
 }
 
+.search-input::-webkit-search-cancel-button {
+  display: none;
+}
+
 .search-submit {
   width: 2rem;
   height: 2rem;

assets/css/src/swiper.css

@@ -1,8 +1,10 @@
 #swiper {
+  position: sticky !important;
+  top: 7rem !important;
   /* https://github.com/nolimits4web/swiper/issues/3599 */
   width: 100%;
   max-width: 100%;
-  max-height: 100vh;
+  max-height: 65vh;
   min-height: 0;
   min-width: 0;
 
@@ -11,28 +13,48 @@
   position: relative;
 }
 
+.swiper-slide {
+  display: flex !important;
+  align-items: center;
+}
+
+/* nav buttons */
 .swiper-button {
   width: 50% !important;
   height: 100% !important;
   top: 0 !important;
+  z-index: 3 !important;
+  margin-top: 0 !important;
 }
-.swiper-button:before,
-.swiper-button:after {
+
+.swiper-button-next:after,
+.swiper-button-prev:after {
   content: "" !important;
 }
 
-.swiper-button-next:hover {
-  cursor: url(../../images/icons/arrow-next.svg) 10 20, auto !important;
+.swiper-button-next {
+  justify-content: flex-end !important;
 }
-.swiper-button-prev:hover {
-  cursor: url(../../images/icons/arrow-prev.svg) 10 20, auto !important;
+.swiper-button-prev {
+  justify-content: flex-start !important;
+}
+
+.swiper-button img {
+  width: 2.5rem;
 }
 
 @media screen and (max-width: 800px) {
+  #swiper {
+    position: static !important;
+  }
   #swiper picture {
     height: 100%;
   }
   #swiper picture img {
     object-fit: contain;
   }
+
+  .swiper-button {
+    display: none !important;
+  }
 }

assets/images/icons/close.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M16.3273 9.87689e-07L18 1.67268L1.67287 17.9998L0.000192507 16.3271L16.3273 9.87689e-07Z" fill="black"/>
+  <path d="M16.3271 17.9998L17.9998 16.3271L1.67268 0L0 1.67268L16.3271 17.9998Z" fill="black"/>
+</svg>

assets/js/swiper.js

@@ -8,8 +8,5 @@ document.addEventListener("DOMContentLoaded", () => {
     },
     keyboard: true,
     loop: true,
-    autoplay: {
-      delay: 2500,
-    },
   });
 });

site/templates/event.php

@@ -18,8 +18,8 @@
       <?php endforeach ?>
     </div>
 
-    <div class="swiper-button swiper-button-prev"></div>
-    <div class="swiper-button swiper-button-next"></div>
+    <button class="swiper-button swiper-button-prev" title="image précédente"><img src="<?= url('assets/images/icons/arrow-prev.svg') ?>" alt=""></button>
+    <button class="swiper-button swiper-button-next" title="image suivante"><img src="<?= url('assets/images/icons/arrow-next.svg') ?>" alt=""></button>
   </div>
   <div class="presentation__text">
     <h2 class="h1 presentation__title"><?= $page->title() ?></h2>