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

Show “full slides in the carousels, 3 slides in the biggest breakpoint 

Customer does not want the next slide to show partially; either it shows
theo whole slide, or not at all.

Had to remove the min-width for campsite type’s spiel, or it would make
the whole thing fall over, i do not know why; possibly because slick
could not reduce the width to its expected value.
This commit is contained in:
jordi fita mas 2023-12-20 20:11:39 +01:00
parent 678b5cc523
commit b4b7584c14
2 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/static/public.css
View File

@ -454,7 +454,6 @@ dl, .nature div + div, .outside_activities > div {
.carousel .spiel { .carousel .spiel {
font-size: 2.4rem; font-size: 2.4rem;
padding-right: 4rem;
} }
.carousel .spiel p { .carousel .spiel p {
@ -462,7 +461,7 @@ dl, .nature div + div, .outside_activities > div {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.carousel figure, .carousel .slick-track > img { .carousel .spiel, .carousel figure, .carousel .slick-track > img {
margin-right: 5rem; margin-right: 5rem;
position: relative; position: relative;
} }
@ -488,12 +487,7 @@ dl, .nature div + div, .outside_activities > div {
.carousel .slick-list { .carousel .slick-list {
order: 1; order: 1;
padding: 0 20% 0 0 !important; margin-right: -5rem;
}
.carousel .slick-track {
display: flex;
align-items: start;
} }
.carousel.slick-slider { .carousel.slick-slider {
@ -688,11 +682,6 @@ dl, .nature div + div, .outside_activities > div {
align-items: center; align-items: center;
} }
.campsite_type.carousel .spiel {
min-width: calc((100vw - 5rem/* main margin */ - 5rem/* booking gap */) * .40111/* flex: .4 of form */ + 5rem /* booking gap again */);
flex-shrink: 0;
}
.campsite_type.carousel .spiel h3 { .campsite_type.carousel .spiel h3 {
font-size: calc(1.8rem + 1.7vw); font-size: calc(1.8rem + 1.7vw);
font-weight: 700; font-weight: 700;
@ -1315,4 +1304,4 @@ dt {
.services_icon a { .services_icon a {
color: var(--accent); color: var(--accent);
text-decoration: var(--accent) wavy underline; text-decoration: var(--accent) wavy underline;
} }

8
web/templates/public/layout.gohtml
View File

@ -128,13 +128,19 @@
<script> <script>
jQuery(function () { jQuery(function () {
jQuery('.carousel').slick({ jQuery('.carousel').slick({
slidesToShow: 2, slidesToShow: 3,
slidesToScroll: 1, slidesToScroll: 1,
infinite: false, infinite: false,
arrows: true, arrows: true,
prevArrow: '<button type="button" class="slick-prev">←</button>', prevArrow: '<button type="button" class="slick-prev">←</button>',
nextArrow: '<button type="button" class="slick-next">→</button>', nextArrow: '<button type="button" class="slick-next">→</button>',
responsive: [ responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
}
},
{ {
breakpoint: 768, breakpoint: 768,
settings: { settings: {