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.
This commit is contained in:
parent
b1e3f5017f
commit
76d94f76f0
|
|
@ -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 {
|
||||
height: 65vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero div {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
.hero .slick-initialized .slick-slide {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 5rem;
|
||||
padding: 5rem;
|
||||
transition: opacity 1s ease-in-out;
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 65vh;
|
||||
}
|
||||
|
||||
.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 {
|
||||
order: 2;
|
||||
margin: 2.5rem 4rem 0 0;
|
||||
.slick-slider .slick-prev {
|
||||
order: -2;
|
||||
margin: 0 4rem 2.5rem 0;
|
||||
}
|
||||
|
||||
.carousel .slick-prev:hover {
|
||||
.slick-slider .slick-prev:hover {
|
||||
transform: translateX(-1.3rem);
|
||||
}
|
||||
|
||||
.carousel .slick-next {
|
||||
order: 3;
|
||||
margin: 2.5rem 7rem 0 0;
|
||||
.slick-slider .slick-next {
|
||||
order: -1;
|
||||
margin: 0 7rem 2.5rem 0;
|
||||
}
|
||||
|
||||
.carousel .slick-next:hover {
|
||||
.slick-slider .slick-next:hover {
|
||||
transform: translateX(1.3rem);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,18 +14,15 @@
|
|||
|
||||
{{ define "content" -}}
|
||||
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/home.homePage*/ -}}
|
||||
<div class="hero" role="marquee"
|
||||
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); }}"
|
||||
x-init="reset()"
|
||||
>
|
||||
{{ range $index, $slide := .Cover -}}
|
||||
<div x-cloak :aria-hidden="cur !== {{ $index }}" 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>
|
||||
<button @click="next()"><span>Next</span></button>
|
||||
<div class="hero">
|
||||
<div role="marquee">
|
||||
{{ range $index, $slide := .Cover -}}
|
||||
<div style="--background-image:url('{{ .Media }}')">
|
||||
<span>{{ .Caption }}</span>
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
<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 }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue