160 lines
2.9 KiB
SCSS
160 lines
2.9 KiB
SCSS
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
|
|
|
|
|