carroussel thumbnial vertical droite

This commit is contained in:
2025-06-06 19:21:58 +02:00
parent 6bae2963fa
commit 0371076642
4 changed files with 98 additions and 79 deletions
+27 -10
View File
@@ -5838,12 +5838,12 @@ svg.ext {
margin-top: 5rem;
padding: 0;
order: 7;
width: 80%;
width: 85%;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel {
display: grid;
grid-template-columns: 1fr 10fr;
gap: 1.5rem;
grid-template-columns: 10fr 1fr;
gap: 4rem;
justify-content: center;
margin: auto;
}
@@ -5863,6 +5863,7 @@ svg.ext {
height: auto;
object-fit: contain;
max-height: 550px;
border: none;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .caption {
margin-top: 1rem;
@@ -5872,7 +5873,6 @@ svg.ext {
color: #444;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .arrow {
display: none;
font-size: 2rem;
color: #333;
background: none;
@@ -5901,14 +5901,15 @@ svg.ext {
grid-row: 2;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper {
grid-column: 1;
grid-column: 2;
display: flex;
flex-direction: column;
align-items: center;
max-height: 70vh;
max-height: 65vh;
grid-row: 1/span 2;
top: -30px;
top: -35px;
position: relative;
overflow: hidden;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow {
cursor: pointer;
@@ -5918,27 +5919,43 @@ svg.ext {
border-radius: 50%;
user-select: none;
z-index: 2;
position: relative;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.up {
transform: rotate(90deg);
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.down {
transform: rotate(90deg);
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .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;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails::-webkit-scrollbar {
display: none;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails 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;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails img.active {
border-color: #00aaff;
transform: scale(1.3);
margin-top: 0.8rem;
margin-bottom: 0.8rem;
opacity: 1;
z-index: 1;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items {
display: none;