studio-variable/botascopia-webiste-static
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

slider ok

Browse source
This commit is contained in:
Julie Blanc 2026-01-12 21:13:05 +01:00
parent 55014b1c49
commit 9cea19be6f
5 changed files with 69 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

81
assets/style.css
View file

@ -317,7 +317,8 @@ button {
height: 100%;
width: 100%;
margin-left: 0;
overflow: hidden;
overflow: visible;
--arrow-space: 40px;
}
.slideshow * {
position: relative;
@ -326,6 +327,7 @@ button {
.slideshow-container {
height: 100%;
width: 100%;
overflow: hidden;
}
.slideshow-inner {
@ -337,10 +339,13 @@ button {
width: calc(100% / var(--items));
height: 100%;
float: left;
display: flex;
flex-direction: column;
align-items: center;
}
.slideshow-item figure {
width: 100%;
height: 100%;
width: calc(100% - var(--arrow-space) * 2);
height: calc(100% - var(--unit));
}
.slideshow-item figure img {
width: 100%;
@ -348,6 +353,12 @@ button {
-o-object-fit: cover;
object-fit: cover;
}
.slideshow-item figcaption {
width: calc(100% - var(--arrow-space) * 2);
font-size: var(--fs-small);
height: calc(var(--unit) * 2);
padding-top: calc(var(--padding-inner) * 0.5);
}
/* Display slides (input checked)
--------------------------------------------------------
@ -361,27 +372,6 @@ button {
transition: all 0.5s ease-out;
}
/* Move slides overflowed container */
#slide-input-1:checked ~ .slideshow-inner {
left: 0;
}
#slide-input-2:checked ~ .slideshow-inner {
left: -100%;
}
#slide-input-3:checked ~ .slideshow-inner {
left: -200%;
}
#slide-input-4:checked ~ .slideshow-inner {
left: -300%;
}
#slide-input-5:checked ~ .slideshow-inner {
left: -400%;
}
/* Controls (arrows)
--------------------------------------------------------
-------------------------------------------------------- */
@ -421,14 +411,13 @@ span.controls::after {
top: 50%;
transform: translateY(-50%);
position: absolute;
background: white;
font-size: 20px;
z-index: 9;
}
.slide_controls-previous:hover ~ span.controls:before,
.slide_controls-next:hover ~ span.controls:after {
background: #bfbfbf !important;
opacity: 0.7;
}
span.controls::before {
@ -441,12 +430,17 @@ span.controls::after {
right: -1px;
}
/* Control arrows display
--------------------------------------------------------------------
-------------------------------------------------------------------- */
#slide-input-0:checked ~ .slideshow-controls label {
/* toggle all label nav */
display: block;
/* Position slide + Control arrows display -------------------------------------------- */
#slide-input-1:checked ~ .slideshow-inner {
left: 0%;
}
#slide-input-2:checked ~ .slideshow-inner {
left: -100%;
}
#slide-input-3:checked ~ .slideshow-inner {
left: -200%;
}
#slide-input-1:checked ~ .slideshow-controls label {
@ -476,24 +470,6 @@ span.controls::after {
z-index: 11;
}
#slide-input-4:checked ~ .slideshow-controls label {
z-index: -1;
}
#slide-input-4:checked ~ .slideshow-controls label:nth-of-type(7),
#slide-input-4:checked ~ .slideshow-controls label:nth-of-type(8) {
z-index: 11;
}
#slide-input-5:checked ~ .slideshow-controls label {
z-index: -1;
}
#slide-input-5:checked ~ .slideshow-controls label:nth-of-type(9),
#slide-input-5:checked ~ .slideshow-controls label:nth-of-type(10) {
z-index: 11;
}
.item-nav {
border: 1px solid var(--color-txt-light);
border-radius: var(--radius-small);
@ -527,7 +503,6 @@ span.controls::after {
margin-top: 0.5em;
flex-grow: 2;
padding-right: 2ch;
font-weight: 500;
}
.item-nav:hover {
border-color: var(--color-txt);
@ -579,8 +554,10 @@ span.controls::after {
.slideshow {
width: 100%;
height: calc(var(--unit) * 13);
}
.slideshow figure {
height: calc(var(--unit) * 11);
overflow: hidden;
}
.highlight-block {