slick carroussel

This commit is contained in:
2024-03-04 15:18:42 +01:00
parent 297d94a6fb
commit 5f698150f5
9 changed files with 114 additions and 79 deletions
@@ -13,8 +13,8 @@ $slick-loader-path: "./" !default;
$slick-arrow-color: white !default;
$slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "\2190" !default;
$slick-next-character: "\2192" !default;
$slick-prev-character: url(../images/chevron_to_left.svg);
$slick-next-character: url(../images/chevron_to_right.svg);
$slick-dot-character: "\2022" !default;
$slick-dot-size: 6px !default;
$slick-opacity-default: 0.75 !default;
@@ -64,10 +64,11 @@ $slick-opacity-not-active: 0.25 !default;
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
opacity: 0.5;
// height: 50px;
width: 60px;
// line-height: 2rem;
// font-size: 8rem;
cursor: pointer;
background: transparent;
color: transparent;
@@ -78,52 +79,54 @@ $slick-opacity-not-active: 0.25 !default;
padding: 0;
border: none;
outline: none;
&:hover, &:focus {
outline: none;
background: transparent;
color: transparent;
&:before {
opacity: $slick-opacity-on-hover;
}
}
&.slick-disabled:before {
opacity: $slick-opacity-not-active;
}
&:before {
font-family: $slick-font-family;
font-size: 20px;
line-height: 1;
color: $slick-arrow-color;
opacity: $slick-opacity-default;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// &:hover, &:focus {
// outline: none;
// background: transparent;
// color: transparent;
// &:before {
// opacity: $slick-opacity-on-hover;
// }
// }
// &.slick-disabled:before {
// opacity: $slick-opacity-not-active;
// }
// &:before {
// font-family: $slick-font-family;
// font-size: 50px;
// line-height: 1;
// color: $slick-arrow-color;
// opacity: $slick-opacity-default;
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
// }
}
.slick-prev {
left: 5%;
left: 100px;
[dir="rtl"] & {
left: auto;
right: 5%;
right: 100px;
}
&:before {
content: url("../../images/fleche_blanche.svg");
content: $slick-prev-character;
[dir="rtl"] & {
content: url("../../images/fleche_blanche.svg");
content: $slick-next-character;
}
}
}
.slick-next {
right: -25px;
right: 100px;
[dir="rtl"] & {
left: -25px;
left: 100px;
right: auto;
}
&:before {
content: url("../../images/fleche_blanche.svg");
content: $slick-next-character;
[dir="rtl"] & {
content: url("../../images/fleche_blanche.svg");
content: $slick-prev-character;
}
}
}
@@ -63,7 +63,7 @@
}
.slick-slide {
float: left;
height: 100%;
height: 50vh;
min-height: 1px;
[dir="rtl"] & {
float: right;