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%;
width: 100%;
counter-increment: item;
z-index: 1; // important: need to have a base set
}
.slide-content {
position: absolute;
width: 100%;
z-index: 0;
.slide-image {
padding: 0;
margin: 0;
img {
border-radius: 2px;
}
figcaption {
font-size: .9rem;
opacity: 0.9;
@ -140,13 +144,14 @@ $height: 30rem;
}
.carousel__snapper {
position: absolute;
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100%;
scroll-snap-align: center;
z-index: 1;
z-index: 2;
pointer-events: none; // let the slide content take the pointer events
}
// @media (hover: hover) {
@ -213,7 +218,7 @@ $height: 30rem;
border-radius: 50%;
font-size: 0;
outline: 0;
z-index: 4;
z-index: 2;
}
.carousel::before,
@ -226,11 +231,16 @@ $height: 30rem;
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
.carousel::before,
.carousel::after {
content: '';
z-index: 1;
z-index: 10;
background-color: transparent;
opacity: 0.65;
background-size: 1.5rem 1.5rem;
@ -293,6 +303,7 @@ $height: 30rem;
.image-container {
margin-top: 1.5rem;
display: flex;
align-items: center;
}
@ -323,6 +334,7 @@ $height: 30rem;
.image-container {
display: flex;
justify-content: center;
padding-top: 2rem;
}
.slide-image {