diff --git a/assets/css/src/swiper.css b/assets/css/src/swiper.css
new file mode 100644
index 0000000..fcabc4f
--- /dev/null
+++ b/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;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 8ed6c7c..011e96a 100644
--- a/assets/css/style.css
+++ b/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");
diff --git a/assets/images/icons/arrow-next.svg b/assets/images/icons/arrow-next.svg
new file mode 100644
index 0000000..e955197
--- /dev/null
+++ b/assets/images/icons/arrow-next.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/assets/images/icons/arrow-prev.svg b/assets/images/icons/arrow-prev.svg
new file mode 100644
index 0000000..49913d3
--- /dev/null
+++ b/assets/images/icons/arrow-prev.svg
@@ -0,0 +1,10 @@
+
diff --git a/assets/js/swiper.js b/assets/js/swiper.js
new file mode 100644
index 0000000..0a04281
--- /dev/null
+++ b/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,
+ },
+ });
+});
diff --git a/site/snippets/header.php b/site/snippets/header.php
index 516be0f..3a3bdb7 100644
--- a/site/snippets/header.php
+++ b/site/snippets/header.php
@@ -15,6 +15,11 @@
= js('/assets/js/calendar.js') ?>
+ template() == 'event'): ?>
+
+
+
+
color()->exists()): ?>