slider ok
This commit is contained in:
Julie Blanc
parent
55014b1c49
commit
9cea19be6f
5 changed files with 69 additions and 96 deletions
|
|
@ -37,7 +37,6 @@
|
|||
margin-top: 0.5em;
|
||||
flex-grow: 2;
|
||||
padding-right: 2ch;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
|
|
|
|||
|
|
@ -57,8 +57,11 @@
|
|||
|
||||
.slideshow{
|
||||
width: 100%;
|
||||
height: calc(var(--unit)*11);
|
||||
overflow: hidden;
|
||||
height: calc(var(--unit)*13);
|
||||
|
||||
figure{
|
||||
height: calc(var(--unit)*11);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-block{
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
|
||||
$slideshow-items: 3;
|
||||
|
||||
.slideshow {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
overflow: hidden;
|
||||
// overflow-y: hidden;
|
||||
overflow: visible;
|
||||
--arrow-space: 40px;
|
||||
*{
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -14,6 +16,7 @@
|
|||
.slideshow-container{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slideshow-inner {
|
||||
|
|
@ -25,16 +28,26 @@
|
|||
width: calc(100%/var(--items));
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
figure{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -52,18 +65,6 @@
|
|||
}
|
||||
|
||||
|
||||
/* 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%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -106,14 +107,15 @@ span.controls::after {
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
background: white;
|
||||
// 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;
|
||||
// background: #bfbfbf!important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
span.controls::before {
|
||||
|
|
@ -126,32 +128,24 @@ span.controls::after {
|
|||
right: -1px;
|
||||
}
|
||||
|
||||
/* Control arrows display
|
||||
--------------------------------------------------------------------
|
||||
-------------------------------------------------------------------- */
|
||||
/* Position slide + 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;
|
||||
|
||||
@for $i from 1 through $slideshow-items {
|
||||
#slide-input-#{$i}:checked ~ .slideshow-inner {
|
||||
left: #{($i - 1) * -100%};
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue