154 lines
2.8 KiB
SCSS
154 lines
2.8 KiB
SCSS
$slideshow-items: 3;
|
||
|
||
.slideshow {
|
||
height: 100%;
|
||
width: 100%;
|
||
margin-left: 0;
|
||
// overflow-y: hidden;
|
||
overflow: visible;
|
||
--arrow-space: 40px;
|
||
*{
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
|
||
.slideshow-container{
|
||
height: 100%;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.slideshow-inner {
|
||
width: calc(100% * var(--items));
|
||
height: 100%;
|
||
}
|
||
|
||
.slideshow-item {
|
||
width: calc(100%/var(--items));
|
||
height: 100%;
|
||
float: left;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
figure{
|
||
width: calc(100% - var(--arrow-space)*2);
|
||
height: calc(100% - var(--unit));
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
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)
|
||
--------------------------------------------------------
|
||
-------------------------------------------------------- */
|
||
|
||
.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;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* 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;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
span.controls::before {
|
||
content: "❬";
|
||
left: -1px;
|
||
}
|
||
|
||
span.controls::after {
|
||
content: "❭";
|
||
right: -1px;
|
||
}
|
||
|
||
/* Position slide + Control arrows display -------------------------------------------- */
|
||
|
||
|
||
@for $i from 1 through $slideshow-items {
|
||
#slide-input-#{$i}:checked ~ .slideshow-inner {
|
||
left: #{($i - 1) * -100%};
|
||
}
|
||
}
|
||
|
||
|
||
@for $i from 1 through $slideshow-items {
|
||
#slide-input-#{$i}:checked ~ .slideshow-controls label {
|
||
z-index: -1;
|
||
}
|
||
#slide-input-#{$i}:checked ~ .slideshow-controls label:nth-of-type(#{$i * 2 - 1}),
|
||
#slide-input-#{$i}:checked ~ .slideshow-controls label:nth-of-type(#{$i * 2}) {
|
||
z-index: 11;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|