finish event swiper desktop

assets/css/src/swiper.css

@@ -0,0 +1,29 @@
+#swiper {
+  /* https://github.com/nolimits4web/swiper/issues/3599 */
+  width: 100%;
+  max-width: 100%;
+  max-height: 100vh;
+  min-height: 0;
+  min-width: 0;
+
+  /* Custom */
+  overflow: hidden;
+  position: relative;
+}
+
+.swiper-button {
+  width: 50% !important;
+  height: 100% !important;
+  top: 0 !important;
+}
+.swiper-button:before,
+.swiper-button:after {
+  content: "" !important;
+}
+
+.swiper-button-next:hover {
+  cursor: url(../../images/icons/arrow-next.svg) 10 20, auto !important;
+}
+.swiper-button-prev:hover {
+  cursor: url(../../images/icons/arrow-prev.svg) 10 20, auto !important;
+}

assets/css/style.css

@@ -12,5 +12,6 @@
 @import url("src/newsletter.css");
 @import url("src/event-key-infos.css");
 @import url("src/event-presentation.css");
+@import url("src/swiper.css");
 @import url("src/collapsable-section.css");
 @import url("src/footer.css");

assets/images/icons/arrow-next.svg

@@ -0,0 +1,10 @@
+<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2028_4182)">
+<path d="M25.8719 12.9654L26.2124 12.6163L25.8719 12.2672L14.3842 0.488181L14.0257 0.120551L13.6678 0.488766L11.3553 2.86759L11.0079 3.22495L11.3642 3.5735L18.5506 10.6047C17.751 10.5109 16.8258 10.4665 15.8539 10.4665H1.08398H0.583984L0.583984 10.9665L0.583985 14.2662L0.583986 14.7662H1.08398H15.8539H15.854C16.8427 14.7662 17.7785 14.7201 18.5816 14.6306L11.365 21.6583L11.0071 22.0068L11.3553 22.365L13.6678 24.7439L14.0257 25.1122L14.3842 24.7445L25.8719 12.9654Z" fill="black" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2028_4182">
+<rect width="26" height="25" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/images/icons/arrow-prev.svg

@@ -0,0 +1,10 @@
+<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2028_4184)">
+<path d="M0.128078 12.0346L-0.212384 12.3837L0.128079 12.7328L11.6158 24.5118L11.9743 24.8794L12.3322 24.5112L14.6447 22.1324L14.9921 21.775L14.6358 21.4265L7.4494 14.3953C8.24898 14.4891 9.17416 14.5335 10.1461 14.5335L24.916 14.5335L25.416 14.5335L25.416 14.0335L25.416 10.7338L25.416 10.2338L24.916 10.2338L10.1461 10.2338L10.146 10.2338C9.15735 10.2338 8.22154 10.2799 7.41844 10.3694L14.635 3.34169L14.9929 2.99317L14.6447 2.63497L12.3322 0.256074L11.9743 -0.112153L11.6158 0.255484L0.128078 12.0346Z" fill="black" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2028_4184">
+<rect width="26" height="25" fill="white" transform="translate(26 25) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>

assets/js/swiper.js

@@ -0,0 +1,15 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const swiperIssue = new Swiper("#swiper", {
+    direction: "horizontal",
+    slidesPerView: 1,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    keyboard: true,
+    loop: true,
+    autoplay: {
+      delay: 2500,
+    },
+  });
+});

site/snippets/header.php

@@ -15,6 +15,11 @@
       <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/fr.js"></script>
       <?= js('/assets/js/calendar.js') ?>
     <?php endif ?>
+    <?php if ($page->template() == 'event'): ?>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" defer />
+        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>
+        <script src="<?= url('assets/js/swiper.js') ?>" defer></script>
+    <?php endif ?>
     <script src="<?= url('assets/js/script.js') ?>" type="module" defer></script>
     <?php if ($page->color()->exists()): ?>
         <style>

site/templates/event.php

@@ -9,7 +9,18 @@
 </section>
 
 <section class="presentation">
-  <?php snippet('picture', ['file' => $page->gallery()->toFiles()->first()]) ?>
+  <div id="swiper" style="--span: 8;">
+    <div class="swiper-wrapper">
+      <?php foreach($page->gallery()->toFiles() as $slide): ?>
+      <div class="swiper-slide">
+        <?php snippet('picture', ['file' => $slide]) ?>
+      </div>
+      <?php endforeach ?>
+    </div>
+
+    <div class="swiper-button swiper-button-prev"></div>
+    <div class="swiper-button swiper-button-next"></div>
+  </div>
   <div class="presentation__text">
     <h2 class="h1 presentation__title"><?= $page->title() ?></h2>
     <h3 class="h2 presentation__authors"><?= $page->authors() ?></h3>