tandem
/
camper
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move carousel arrows inside the carousel, in the top-right 

I misunderstood Oriol, and what he really wanted was to have the arrows
on top of the image, not just move the arrows from below to above. Thus,
I no longer need the carrousel to be a flex because the buttons are now
absolutely position (slick.css already sets the container to relative
position).

These arrows need to be visually inside a single container, to have a
white background, but Slick adds the two arrows separately.  I had to
move them close together, remove the radius from the “common edge”, and
use padding to “move” the arrows, rather than translation, in order to
avoid showing a gap.
This commit is contained in:
jordi fita mas 2024-01-17 17:51:02 +01:00
parent 962996be0b
commit 25308a3359
1 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/static/public.css
View File

@ -587,43 +587,38 @@ dl, .nature > div, .outside_activities > div {
margin-right: -5rem; margin-right: -5rem;
} }
.slick-slider.slick-initialized {
display: flex;
flex-wrap: wrap;
justify-content: end;
}
.slick-slider .slick-arrow { .slick-slider .slick-arrow {
font-size: 6rem; font-size: 4rem;
line-height: 1; line-height: 1;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border: none !important; border: none !important;
background: none; background: var(--base);
cursor: pointer; cursor: pointer;
transition: transform 0.5s ease; transition: padding 0.5s ease;
} position: absolute;
top: 1rem;
.slick-slider .slick-prev.slick-arrow, .slick-slider .slick-next.slick-arrow { z-index: 1;
opacity: 1;
} }
.slick-slider .slick-prev { .slick-slider .slick-prev {
order: -2; right: 6rem;
margin: 0 4rem 2.5rem 0; border-top-right-radius: 0;
border-bottom-right-radius: 0;
} }
.slick-slider .slick-prev:hover { .slick-slider .slick-prev:hover {
transform: translateX(-1.3rem); padding-right: 1.3rem;
} }
.slick-slider .slick-next { .slick-slider .slick-next {
order: -1; right: 1rem;
margin: 0 7rem 2.5rem 0; border-top-left-radius: 0;
border-bottom-left-radius: 0;
} }
.slick-slider .slick-next:hover { .slick-slider .slick-next:hover {
transform: translateX(1.3rem); padding-left: 1.3rem;
} }
.enjoy { .enjoy {