bachir/d9-eql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

carroussel thumbnial vertical droite

Browse Source
This commit is contained in:
ouidade
2025-06-06 19:21:58 +02:00
parent 6bae2963fa
commit 0371076642
4 changed files with 98 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss
+55 -66
View File
@@ -15,12 +15,12 @@
margin-top: 5rem;
padding: 0;
order: 7;
width: 80%;
width: 85%;
.carousel {
display: grid;
// flex-direction: row;
grid-template-columns: 1fr 10fr;
gap: 1.5rem;
grid-template-columns: 10fr 1fr;
gap: 4rem;
// align-items: flex-start;
justify-content: center;
margin: auto;
@@ -41,6 +41,7 @@
height: auto;
object-fit: contain;
max-height: 550px;
border: none;
}
.caption {
@@ -53,7 +54,7 @@
}
.arrow {
display: none;
// display: none;
font-size: 2rem;
color: #333;
background: none;
@@ -87,14 +88,38 @@
grid-row: 2;
}
.thumbnails-wrapper {
grid-column: 1;
grid-column: 2;
display: flex;
flex-direction: column;
align-items: center;
max-height: 70vh;
grid-row: 1 /span 2;
top: -30px;
max-height: 65vh;
grid-row: 1 / span 2;
top: -35px;
position: relative;
overflow: hidden;
// Dégradé haut
// &::before,
// &::after {
// content: "";
// position: absolute;
// left: 0;
// right: 0;
// height: 50px;
// z-index: 1;
// pointer-events: none;
// }
// &::before {
// top: 0;
// background: linear-gradient(to bottom, white, transparent);
// }
// &::after {
// bottom: 0;
// background: linear-gradient(to top, white, transparent);
// }
.thumb-arrow {
cursor: pointer;
padding: 5px 10px;
@@ -103,89 +128,53 @@
border-radius: 50%;
user-select: none;
z-index: 2;
// font-weight: bold;
position: relative;
&.up {
transform: rotate(90deg);
}
&.down {
transform: rotate(90deg);
}
}
.thumbnails {
display: flex;
flex-direction: column;
gap: 10px;
gap: 6px;
overflow-y: auto;
max-height: 100%;
scroll-behavior: smooth;
position: relative;
z-index: 0;
padding: 5px 0;
&::-webkit-scrollbar {
display: none;
}
img {
width: 60px;
width: 80px;
height: 60px;
object-fit: contain;
border: 2px solid transparent;
cursor: pointer;
opacity: 0.7;
transition: transform 0.3s ease, opacity 0.3s ease;
&.active {
border-color: #00aaff;
transform: scale(1.3);
margin-top: 0.8rem;
margin-bottom: 0.8rem;
opacity: 1;
z-index: 1;
}
}
}
}
// .thumbnails-wrapper {
// position: relative;
// max-width: 100%;
// overflow: hidden;
// display: flex;
// align-items: center;
// justify-content: center;
// .thumb-arrow {
// cursor: pointer;
// padding: 5px 10px;
// background: #00aaff;
// color: white;
// border-radius: 50%;
// user-select: none;
// z-index: 2;
// // font-weight: bold;
// &.left {
// margin-right: 10px;
// }
// &.right {
// margin-left: 10px;
// }
// }
// .thumbnails {
// display: flex;
// gap: 10px;
// overflow-x: auto;
// scroll-behavior: smooth;
// max-width: 100%;
// padding: 10px 0;
// scrollbar-width: none; // Firefox
// &::-webkit-scrollbar {
// display: none; // Chrome, Safari
// }
// img {
// width: 60px;
// height: 60px;
// object-fit: cover;
// border: 2px solid transparent;
// cursor: pointer;
// &.active {
// border-color: #00aaff;
// }
// }
// }
// }
}
// Masquer les images Drupal originales (facultatif)
.field__items {