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{
|
||||
|
||||
|
||||
|
|
@ -147,7 +153,7 @@
|
|||
grid-column: 1;
|
||||
}
|
||||
|
||||
.highlight-block{
|
||||
.highlight-block, .slideshow{
|
||||
grid-column: 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);
|
||||
}
|
||||
|
||||
.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 {
|
||||
border: 1px solid var(--color-txt-light);
|
||||
border-radius: var(--radius-small);
|
||||
|
|
@ -396,6 +577,12 @@ button {
|
|||
margin-bottom: calc(var(--unit) * 3);
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
width: 100%;
|
||||
height: calc(var(--unit) * 11);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.highlight-block {
|
||||
background-color: var(--color);
|
||||
border: 1px solid var(--color-txt-light);
|
||||
|
|
@ -470,7 +657,7 @@ button {
|
|||
.home--section-tool .section--inner .item-nav {
|
||||
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-row: 2;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -6,6 +6,7 @@
|
|||
@use "css/site-footer";
|
||||
@use "css/buttons";
|
||||
@use "css/see-more";
|
||||
@use "css/slideshow";
|
||||
|
||||
@use "css/home-item-nav";
|
||||
@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 |
66
index.html
66
index.html
|
|
@ -119,7 +119,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home--section-tool" id="home__ateliers">
|
||||
<section class="home--section-tool" id="home__ateliers">
|
||||
<div class="section--inner">
|
||||
<h2 class="section--title">Ateliers</h2>
|
||||
<div class="item-nav__group">
|
||||
|
|
@ -138,14 +138,64 @@
|
|||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue