add slideshow
This commit is contained in:
Julie Blanc
parent
b8f12369b8
commit
55014b1c49
7 changed files with 416 additions and 12 deletions
|
|
@ -55,6 +55,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.slideshow{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(var(--unit)*11);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.highlight-block{
|
.highlight-block{
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -147,7 +153,7 @@
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight-block{
|
.highlight-block, .slideshow{
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
160
assets/css/_slideshow.scss
Normal file
160
assets/css/_slideshow.scss
Normal file
|
|
@ -0,0 +1,160 @@
|
||||||
|
|
||||||
|
|
||||||
|
.slideshow {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
*{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.slideshow-container{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-inner {
|
||||||
|
width: calc(100% * var(--items));
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-item {
|
||||||
|
width: calc(100%/var(--items));
|
||||||
|
height: 100%;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
figure{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Display slides (input checked)
|
||||||
|
--------------------------------------------------------
|
||||||
|
-------------------------------------------------------- */
|
||||||
|
|
||||||
|
.slideshow-inner {
|
||||||
|
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
|
||||||
|
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-item {
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Controls (arrows)
|
||||||
|
--------------------------------------------------------
|
||||||
|
-------------------------------------------------------- */
|
||||||
|
|
||||||
|
.slideshow-controls {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide_controls {
|
||||||
|
width: 40px;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
will-change: z-index;
|
||||||
|
}
|
||||||
|
.slide_controls-previous {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.slide_controls-next {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.controls {
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.controls::before,
|
||||||
|
span.controls::after {
|
||||||
|
padding: 10px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.controls::before {
|
||||||
|
content: "❬";
|
||||||
|
left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.controls::after {
|
||||||
|
content: "❭";
|
||||||
|
right: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Control arrows display
|
||||||
|
--------------------------------------------------------------------
|
||||||
|
-------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
#slide-input-1:checked ~ .slideshow-controls label {
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(1),
|
||||||
|
#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(2) {
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slide-input-2:checked ~ .slideshow-controls label {
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(3),
|
||||||
|
#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(4) {
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slide-input-3:checked ~ .slideshow-controls label {
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(5),
|
||||||
|
#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(6) {
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
189
assets/style.css
189
assets/style.css
|
|
@ -313,6 +313,187 @@ button {
|
||||||
text-decoration: underline var(--hover-bg);
|
text-decoration: underline var(--hover-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slideshow {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.slideshow * {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-container {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-inner {
|
||||||
|
width: calc(100% * var(--items));
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-item {
|
||||||
|
width: calc(100% / var(--items));
|
||||||
|
height: 100%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.slideshow-item figure {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.slideshow-item figure img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Display slides (input checked)
|
||||||
|
--------------------------------------------------------
|
||||||
|
-------------------------------------------------------- */
|
||||||
|
.slideshow-inner {
|
||||||
|
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
|
||||||
|
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-item {
|
||||||
|
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)
|
||||||
|
--------------------------------------------------------
|
||||||
|
-------------------------------------------------------- */
|
||||||
|
.slideshow-controls {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide_controls {
|
||||||
|
width: 40px;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
will-change: z-index;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide_controls-previous {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide_controls-next {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.controls {
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.controls::before,
|
||||||
|
span.controls::after {
|
||||||
|
padding: 10px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.controls::before {
|
||||||
|
content: "❬";
|
||||||
|
left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.controls::after {
|
||||||
|
content: "❭";
|
||||||
|
right: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Control arrows display
|
||||||
|
--------------------------------------------------------------------
|
||||||
|
-------------------------------------------------------------------- */
|
||||||
|
#slide-input-0:checked ~ .slideshow-controls label {
|
||||||
|
/* toggle all label nav */
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slide-input-1:checked ~ .slideshow-controls label {
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(1),
|
||||||
|
#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(2) {
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slide-input-2:checked ~ .slideshow-controls label {
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(3),
|
||||||
|
#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(4) {
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slide-input-3:checked ~ .slideshow-controls label {
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(5),
|
||||||
|
#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(6) {
|
||||||
|
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 {
|
.item-nav {
|
||||||
border: 1px solid var(--color-txt-light);
|
border: 1px solid var(--color-txt-light);
|
||||||
border-radius: var(--radius-small);
|
border-radius: var(--radius-small);
|
||||||
|
|
@ -396,6 +577,12 @@ button {
|
||||||
margin-bottom: calc(var(--unit) * 3);
|
margin-bottom: calc(var(--unit) * 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slideshow {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(var(--unit) * 11);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.highlight-block {
|
.highlight-block {
|
||||||
background-color: var(--color);
|
background-color: var(--color);
|
||||||
border: 1px solid var(--color-txt-light);
|
border: 1px solid var(--color-txt-light);
|
||||||
|
|
@ -470,7 +657,7 @@ button {
|
||||||
.home--section-tool .section--inner .item-nav {
|
.home--section-tool .section--inner .item-nav {
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
}
|
}
|
||||||
.home--section-tool .section--inner .highlight-block {
|
.home--section-tool .section--inner .highlight-block, .home--section-tool .section--inner .slideshow {
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -6,6 +6,7 @@
|
||||||
@use "css/site-footer";
|
@use "css/site-footer";
|
||||||
@use "css/buttons";
|
@use "css/buttons";
|
||||||
@use "css/see-more";
|
@use "css/see-more";
|
||||||
|
@use "css/slideshow";
|
||||||
|
|
||||||
@use "css/home-item-nav";
|
@use "css/home-item-nav";
|
||||||
@use "css/home";
|
@use "css/home";
|
||||||
|
|
|
||||||
BIN
content/images/Epinay3.jpeg
Normal file
BIN
content/images/Epinay3.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
68
index.html
68
index.html
|
|
@ -119,7 +119,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="home--section-tool" id="home__ateliers">
|
<section class="home--section-tool" id="home__ateliers">
|
||||||
<div class="section--inner">
|
<div class="section--inner">
|
||||||
<h2 class="section--title">Ateliers</h2>
|
<h2 class="section--title">Ateliers</h2>
|
||||||
<div class="item-nav__group">
|
<div class="item-nav__group">
|
||||||
|
|
@ -137,15 +137,65 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="slider">
|
|
||||||
<figure>
|
|
||||||
<img src="/content/images/atelier-2.png">
|
|
||||||
<figcaption>
|
|
||||||
Atelier Lorem Ispsum, Rennes, 23 septembre 2025
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="slideshow" data-nbr-item="3" style="--items: 3">
|
||||||
|
<div class="slideshow-container">
|
||||||
|
|
||||||
|
<!-- Inputs --------------------------------------- -->
|
||||||
|
<input type="radio" name="slide-input" id="slide-input-1" hidden="" checked=""/>
|
||||||
|
<input type="radio" name="slide-input" id="slide-input-2" hidden=""/>
|
||||||
|
<input type="radio" name="slide-input" id="slide-input-3" hidden=""/>
|
||||||
|
|
||||||
|
<!-- Slides + container --------------------------- -->
|
||||||
|
<div class="slideshow-inner">
|
||||||
|
<div class="slideshow-item" data-item="1">
|
||||||
|
<figure>
|
||||||
|
<img src="/content/images/atelier-2.png">
|
||||||
|
</figure>
|
||||||
|
<figcaption>
|
||||||
|
Atelier Lorem Ispsum, Rennes, 23 septembre 2025
|
||||||
|
</figcaption>
|
||||||
|
</div>
|
||||||
|
<div class="slideshow-item" data-item="2">
|
||||||
|
<figure>
|
||||||
|
<img src="/content/images/atelier-1.png">
|
||||||
|
</figure>
|
||||||
|
<figcaption>
|
||||||
|
Atelier 2 Lorem Ispsum, Rennes, 23 septembre 2025
|
||||||
|
</figcaption> </div>
|
||||||
|
<div class="slideshow-item" data-item="3">
|
||||||
|
<figure>
|
||||||
|
<img src="/content/images/Epinay3.jpeg">
|
||||||
|
</figure>
|
||||||
|
<figcaption>
|
||||||
|
Atelier 3 Lorem Ispsum, Epinay, 23 septembre 2025
|
||||||
|
</figcaption>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Controls (arrows) -------------------------------- -->
|
||||||
|
|
||||||
|
<nav class="slideshow-controls" aria-hidden="true">
|
||||||
|
<!-- Slide 1: prev=3, next=2 -->
|
||||||
|
<label for="slide-input-3" class="slide_controls slide_controls-previous" alt="Aller à la slide 3"></label>
|
||||||
|
<label for="slide-input-2" class="slide_controls slide_controls-next" alt="Aller à la slide 2"></label>
|
||||||
|
|
||||||
|
<!-- Slide 2: prev=1, next=3 -->
|
||||||
|
<label for="slide-input-1" class="slide_controls slide_controls-previous" alt="Aller à la slide 1"></label>
|
||||||
|
<label for="slide-input-3" class="slide_controls slide_controls-next" alt="Aller à la slide 3"></label>
|
||||||
|
|
||||||
|
<!-- Slide 3: prev=2, next=1 -->
|
||||||
|
<label for="slide-input-2" class="slide_controls slide_controls-previous" alt="Aller à la slide 2"></label>
|
||||||
|
<label for="slide-input-1" class="slide_controls slide_controls-next" alt="Aller à la slide 1"></label>
|
||||||
|
|
||||||
|
<span class="controls" aria-hidden="true"></span>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue