etoiledebethleem/website
5
1
Fork 1
Code Issues 6 Pull requests 1 Projects 1 Releases Packages Activity Actions

fix(carousel): z-index issue in navigation pointers

Browse source
This commit is contained in:
Matthieu Bessat 2024-01-11 08:32:38 +01:00
parent c35507cc2d
commit efb1ecb7f3
1 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
assets/sass/carousel.scss
View file

@ -105,16 +105,20 @@ $height: 30rem;
flex: 0 0 100%; flex: 0 0 100%;
width: 100%; width: 100%;
counter-increment: item; counter-increment: item;
z-index: 1; // important: need to have a base set
} }
.slide-content { .slide-content {
position: absolute; position: absolute;
width: 100%; width: 100%;
z-index: 0;
.slide-image { .slide-image {
padding: 0; padding: 0;
margin: 0; margin: 0;
img {
border-radius: 2px;
}
figcaption { figcaption {
font-size: .9rem; font-size: .9rem;
opacity: 0.9; opacity: 0.9;
@ -140,13 +144,14 @@ $height: 30rem;
} }
.carousel__snapper { .carousel__snapper {
position: absolute; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
scroll-snap-align: center; scroll-snap-align: center;
z-index: 1; z-index: 2;
pointer-events: none; // let the slide content take the pointer events
} }
// @media (hover: hover) { // @media (hover: hover) {
@ -213,7 +218,7 @@ $height: 30rem;
border-radius: 50%; border-radius: 50%;
font-size: 0; font-size: 0;
outline: 0; outline: 0;
z-index: 4; z-index: 2;
} }
.carousel::before, .carousel::before,
@ -226,11 +231,16 @@ $height: 30rem;
right: -0.5rem; right: -0.5rem;
} }
.carousel__prev,.carousel__next {
// make sure that the square on each side is can be interacted with
pointer-events: visible !important;
}
// the big circle navigation button left and right // the big circle navigation button left and right
.carousel::before, .carousel::before,
.carousel::after { .carousel::after {
content: ''; content: '';
z-index: 1; z-index: 10;
background-color: transparent; background-color: transparent;
opacity: 0.65; opacity: 0.65;
background-size: 1.5rem 1.5rem; background-size: 1.5rem 1.5rem;
@ -293,6 +303,7 @@ $height: 30rem;
.image-container { .image-container {
margin-top: 1.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -323,6 +334,7 @@ $height: 30rem;
.image-container { .image-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 2rem;
} }
.slide-image { .slide-image {