Change cover’s carousel to slick, and move arrows of all to top-right

Oriol did not like that this carousel was different from the rest, and
wanted to have it like the rest, but showing only one slide at a time,
like the customer wants.

He also wanted the arrows for **all** carousels to be in the top-right
corner instead of bottom-right, mostly because the customer complains
that she does not see the arrows if they are on the bottom, and Oriol
does not like the arrows to the sides.

web/static/public.css

@@ -155,7 +155,7 @@ address {
     font-style: normal;
 }
 
-body > a[href="#content"], .sr-only, .hero button span {
+body > a[href="#content"], .sr-only {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
@@ -418,7 +418,7 @@ nav:last-of-type > ul > li:last-child {
     padding: 2.5rem;
 }
 
-.hero div, .nature section a {
+.hero .slick-slide, .nature section a {
     background: var(--background-image) center center no-repeat;
     background-size: cover;
 }
@@ -427,61 +427,17 @@ nav:last-of-type > ul > li:last-child {
     margin-bottom: 5rem;
 }
 
-.hero div, .nature section, .services {
+.hero .slick-slide, .nature section, .services {
     border-radius: 5px;
 }
 
-.hero {
+.hero .slick-initialized .slick-slide {
-    height: 65vh;
-    position: relative;
-    overflow: hidden;
-}
-
-.hero div {
-    position: absolute;
-    inset: 0;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 5rem;
     padding: 5rem;
-    transition: opacity 1s ease-in-out;
+    height: 65vh;
-}
-
-.hero div[aria-hidden] {
-    opacity: 0;
-}
-
-.hero button {
-    position: absolute;
-    top: 50%;
-    opacity: 0;
-    z-index: 10;
-    transition: opacity .5s, transform .5s;
-    width: 3.2rem;
-    aspect-ratio: 1;
-    background-color: transparent;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 3.2rem;
-    border: none;
-}
-
-.hero button:first-of-type {
-    left: 1rem;
-    transform: translate(-150%, -50%);
-    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpolyline points="160 208 80 128 160 48" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
-}
-
-.hero button:last-of-type {
-    right: 1rem;
-    transform: translate(150%, -50%);
-    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpolyline points="96 48 176 128 96 208" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
-}
-
-.hero:hover button {
-    transform: translate(0, -50%);
-    opacity: 1;
 }
 
 .services {
@@ -492,17 +448,17 @@ nav:last-of-type > ul > li:last-child {
     padding: 5rem;
 }
 
-.hero div > span, .hero a, .services h2, .surroundings .spiel a {
+.hero .slick-slide span, .hero a, .services h2, .surroundings .spiel a {
     font-weight: bold;
     line-height: .9em;
 }
 
-.hero div > span, .hero a {
+.hero .slick-slide span, .hero a {
     border-radius: 5px;
     background-color: var(--clar);
 }
 
-.hero div > span {
+.hero .slick-slide > span {
     width: 50%;
     margin-bottom: 0;
     font-size: calc(2rem + 4vw);
@@ -510,11 +466,6 @@ nav:last-of-type > ul > li:last-child {
     background: transparent;
     color: var(--base);
     text-shadow: 0 1px 0 black;
-    transition: transform 1s 1s;
-}
-
-.hero div[aria-hidden] > span {
-    transform: translateY(200%);
 }
 
 .hero a, .services h2, .surroundings .spiel a {
@@ -530,16 +481,21 @@ nav:last-of-type > ul > li:last-child {
     transition: transform 0.5s ease;
 }
 
+.hero a {
+    position: absolute;
+    bottom: 6.75rem;
+    right: 7.5rem;
+}
 .hero a:hover span, .services a:hover span, .spiel a:hover span, .campsite_type_booking button:hover span {
     transform: translateX(1.3rem);
 }
 
 @media (max-width: 48rem) {
-    .hero div {
+    .hero .slick-slide {
         flex-direction: column;
     }
 
-    .hero div > span {
+    .hero .slick-slide span {
         width: 100%;
     }
 }
@@ -630,13 +586,13 @@ dl, .nature > div, .outside_activities > div {
     margin-right: -5rem;
 }
 
-.carousel.slick-slider {
+.slick-slider.slick-initialized {
     display: flex;
     flex-wrap: wrap;
     justify-content: end;
 }
 
-.carousel .slick-arrow {
+.slick-slider .slick-arrow {
     font-size: 6rem;
     line-height: 1;
     width: 5rem;
@@ -647,25 +603,25 @@ dl, .nature > div, .outside_activities > div {
     transition: transform 0.5s ease;
 }
 
-.carousel .slick-prev.slick-arrow, .carousel .slick-next.slick-arrow {
+.slick-slider .slick-prev.slick-arrow, .slick-slider .slick-next.slick-arrow {
     opacity: 1;
 }
 
-.carousel .slick-prev {
+.slick-slider .slick-prev {
-    order: 2;
+    order: -2;
-    margin: 2.5rem 4rem 0 0;
+    margin: 0 4rem 2.5rem 0;
 }
 
-.carousel .slick-prev:hover {
+.slick-slider .slick-prev:hover {
     transform: translateX(-1.3rem);
 }
 
-.carousel .slick-next {
+.slick-slider .slick-next {
-    order: 3;
+    order: -1;
-    margin: 2.5rem 7rem 0 0;
+    margin: 0 7rem 2.5rem 0;
 }
 
-.carousel .slick-next:hover {
+.slick-slider .slick-next:hover {
     transform: translateX(1.3rem);
 }
 

web/templates/public/home.gohtml

@@ -14,18 +14,15 @@
 
 {{ define "content" -}}
     {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/home.homePage*/ -}}
-    <div class="hero" role="marquee"
+    <div class="hero">
-         x-data="{cur: 0, len: {{ len .Cover }}, next() { this.slide((this.cur + 1) % this.len); }, prev() { this.slide(this.cur > 0 ? this.cur - 1 : this.len - 1); }, slide(i) { this.cur = i; this.reset(); }, reset() { clearTimeout(this.timeout); this.timeout = setTimeout(this.next.bind(this), 5000); }}"
+        <div role="marquee">
-         x-init="reset()"
-    >
             {{ range $index, $slide := .Cover -}}
-            <div x-cloak :aria-hidden="cur !== {{ $index }}" style="--background-image:url('{{ .Media }}')">
+                <div style="--background-image:url('{{ .Media }}')">
                     <span>{{ .Caption }}</span>
-                <a href="/{{ currentLocale }}/booking">{{( pgettext "Booking" "link" )}} <span>→</span></a>
                 </div>
             {{- end }}
-        <button @click="prev()"><span>Prev</span></button>
+        </div>
-        <button @click="next()"><span>Next</span></button>
+        <a href="/{{ currentLocale }}/booking">{{( pgettext "Booking" "link" )}} <span>→</span></a>
     </div>
     <section class="nature">
         <h2 class="sr-only">{{ (gettext "The pleasure of camping in the middle of nature…")}}</h2>
@@ -66,4 +63,15 @@
     </section>
 
     {{ template "carouselInit" 4 }}
+    <script>
+        jQuery(function () {
+            jQuery('.hero div[role="marquee"]').slick({
+                slidesToShow: 1,
+                infinite: true,
+                arrows: true,
+                prevArrow: '<button type="button" class="slick-prev">←</button>',
+                nextArrow: '<button type="button" class="slick-next">→</button>',
+            });
+        });
+    </script>
 {{- end }}