CSS Slideshow (Sass)
The topic, to put it mildly, is not new, there are a number of articles - on Smashing Magazine and in blogs , as well as just the implementation ( source code , only that part that concerns animation). But, in addition to the fatal flaw, these implementations have actual flaws - the first two options do not provide control, and the last one, although it provides, the animation stops when you switch slideshows and you have to start it again. Perhaps, we can say that this is a feature, but I wanted to completely parody the behavior of the slideshow as if it was written in javascript (which in the end still failed) - that is, when you switch, the animation continues, but starts from the selected slide.
Who is too lazy to read - just the end result .
In the variant presented on Smashing Magazine , each slide has its own animation -
and further for all animations
If all slides are animated in the same way, then this option is redundant - just create one animation and set it for each slide with a different
')
Variables:
The animation itself:
Result at this stage.
It should be understood that this code is not entirely fair - despite the fact that the loop is only three lines, for each
Thus, the volume of css will [at this stage] grow linearly relative to the number of slides. And therefore I propose to temporarily forget about the fact that there is css, as if we are in the future and we have smart breurees who can effectively handle Sass . Without this assumption, reading the article will continue to be scary.
In order to organize the transition to the slide, we need to learn, first, to keep the current state, and second, to be able to change this state. This can be done using radio inputs. Depending on which input is currently active, we will simply change the order in which the elements appear. So, if the first input is active, then the queue will be
Variables and @keyframes are the same as in the previous case.
Result at this stage.
True, if in the previous case css grew linearly with an increase in the number of slides, then now there is a quadratic dependence. But, we agreed not to think about it.
... impossible on its own. That is, we cannot switch them using CSS. But we can animate
Who is too lazy to read - just the end result .
Slide change
In the variant presented on Smashing Magazine , each slide has its own animation -
#slider li.firstanimation { animation: cycle 25s linear infinite; } #slider li.secondanimation { animation: cycletwo 25s linear infinite; } #slider li.thirdanimation { animation: cyclethree 25s linear infinite; } #slider li.fourthanimation { animation: cyclefour 25s linear infinite; } #slider li.fifthanimation { animation: cyclefive 25s linear infinite; } and further for all animations
cycle , cycletwo , etc. @keyframes is described and the code is quite voluminous.If all slides are animated in the same way, then this option is redundant - just create one animation and set it for each slide with a different
animation‑delay . We will get to the :nth‑child element using :nth‑child . Accordingly, if each slide is displayed for 3 seconds, then for the i-th slide the delay will be 3 * (i - 1), for example li:nth‑child(1) { animation‑delay: 0s } . Throughout the entire animation, the slide is first displayed for a while, then hides and remains hidden until the end of the iteration.')
Variables:
// camelCase, .. php // // $sliderLength: 4 // , $delay: 3s // $duration: $sliderLength * $delay // , ( ) $displayTime: 100% / $sliderLength @keyframes toggle // 0% opacity: 0 // 10% . // $delay, #{$displayTime * 0.1} opacity: 1 // 80% #{$displayTime * 0.9} opacity: 1 // 10% #{$displayTime} opacity: 0 // 100% opacity: 0 The animation itself:
// .slider li animation-name: toggle animation-duration: $duration animation-iteration-count: infinite // // animation: toggle $duration infinite @for $i from 0 to $sliderLength .slider li:nth-child(#{$i + 1}) // animation-delay: $delay * $i Result at this stage.
For those not familiar with Sass / SCSS
$sliderLength: 4 // $delay: 3s // $duration: $sliderLength * $delay $displayTime: 100% / $sliderLength // @keyframes toggle // 0% opacity: 0 // #{...} #{$displayTime * 0.1} opacity: 1 #{$displayTime * 0.9} opacity: 1 #{$displayTime} opacity: 0 100% opacity: 0 .slider li animation: toggle $duration infinite // for. - $sliderLength - 1 @for $i from 0 to $sliderLength // .slider li:nth-child(#{$i + 1}) animation-delay: $delay * $i It should be understood that this code is not entirely fair - despite the fact that the loop is only three lines, for each
$i will be created its own css rule - .slider li:nth-child(1) { animation-delay: 0s; } .slider li:nth-child(2) { animation-delay: 3s; } .slider li:nth-child(3) { animation-delay: 6s; } .slider li:nth-child(4) { animation-delay: 9s; } Thus, the volume of css will [at this stage] grow linearly relative to the number of slides. And therefore I propose to temporarily forget about the fact that there is css, as if we are in the future and we have smart breurees who can effectively handle Sass . Without this assumption, reading the article will continue to be scary.
Go to slide
In order to organize the transition to the slide, we need to learn, first, to keep the current state, and second, to be able to change this state. This can be done using radio inputs. Depending on which input is currently active, we will simply change the order in which the elements appear. So, if the first input is active, then the queue will be
1, 2, 3, 4 , if the second is active - 4, 1, 2, 3 , etc. That is, when the nth input is active, we cyclically shift the sequence by n ‑ 1 position to the right. The check will be done using the neighbor selector ~ . For example, input:nth‑of‑type(1):checked ~ .slider li (read — if before the list the first input is active — apply such a style). In this case, the input must be located in front of the list in which the slides lie.Variables and @keyframes are the same as in the previous case.
// . input:active ~ .slider li animation: none !important .slider li animation: toggle $duration infinite // @for $ctrlNumber from 0 to $sliderLength // input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength // $position: $slideNumber - $ctrlNumber // @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}) animation-delay: $delay * $position Result at this stage.
True, if in the previous case css grew linearly with an increase in the number of slides, then now there is a quadratic dependence. But, we agreed not to think about it.
Highlight current input ...
... impossible on its own. That is, we cannot switch them using CSS. But we can animate
, , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
. , , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
.
, , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #cccinput:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position.
/ .
, . , - . - ( ) - , - (). ( : ,
:after :before . , (?) .), , , . - , , . -
label:active { font‑size: 30px; }'' , ,
for label :// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
.
, , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
. , , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
. , , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
.
, , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #cccinput:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position.
/ .
, . , - . - ( ) - , - (). ( : ,
:after :before . , (?) .), , , . - , , . -
label:active { font‑size: 30px; }'' , ,
for label :// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
.
, , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #cccinput:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : ,:after:before. , (?) .)
, , , . - , , . -label:active { font‑size: 30px; }
'' , ,forlabel:// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #cccinput:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : ,:after:before. , (?) .)
, , , . - , , . -label:active { font‑size: 30px; }
'' , ,forlabel:// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #cccinput:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : ,:after:before. , (?) .)
, , , . - , , . -label:active { font‑size: 30px; }
'' , ,forlabel:// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #cccinput:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : ,:after:before. , (?) .)
, , , . - , , . -label:active { font‑size: 30px; }
'' , ,forlabel:// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #cccinput:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : ,:after:before. , (?) .)
, , , . - , , . -label:active { font‑size: 30px; }
'' , ,forlabel:// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #cccinput:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : ,:after:before. , (?) .)
, , , . - , , . -label:active { font‑size: 30px; }
'' , ,forlabel:// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #cccinput:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : ,:after:before. , (?) .)
, , , . - , , . -label:active { font‑size: 30px; }
'' , ,forlabel:// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
.
, , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #ccc
input:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : , :after :before . , (?) .)
, , , . - , , . - label:active { font‑size: 30px; }
'' , , for label :
// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:
input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
., , . - - - ( , - , ?) , . , . . , - , , , . , .
// @keyframes @keyframes toggle-ctrl #{$display-time * 0.1}, #{$display-time * 0.9} background-color: #555 #{$display-time}, 100% background-color: #cccinput:active ~ .slider li, ~ label animation: none !important .slider li animation: toggle-slide $duration infinite label animation: toggle-ctrl $duration infinite @for $ctrlNumber from 0 to $sliderLength input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $sliderLength $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $sliderLength ~ .slider li:nth-child(#{$slideNumber + 1}), // ~ label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position
.
/ .
, . , - . - ( ) - , - (). ( : ,:after:before. , (?) .)
, , , . - , , . -label:active { font‑size: 30px; }
'' , ,forlabel:// html (jade) - for (var i = 0; i < sliderLength; i++) - var id = i - 1 - if (id < 0) id = sliderLength - 1 label.prev(for='c#{id}') ⇚ - for (var i = 0; i < sliderLength; i++) - var id = i + 1 - if (id === sliderLength) id = 0 label.next(for='c#{id}') ⇛
CSS:input:active ~ .slide li, ~ .label, ~ .prev, ~ .next animation: none !important .slide li animation: toggle-slide $duration infinite .label animation: toggle-ctrl $duration infinite .prev, .next animation: toggle-arrow $duration infinite @for $ctrlNumber from 0 to $length input:nth-of-type(#{$ctrlNumber + 1}):checked @for $slideNumber from 0 to $length $position: $slideNumber - $ctrlNumber @if $position < 0 $position: $position + $length ~ .slide li:nth-child(#{$slideNumber + 1}), ~ .label:nth-of-type(#{$slideNumber + 1}) animation-delay: $delay * $position // $prev: $slideNumber - 1 @if $prev < 0 $prev: $length - 1 // $next: $slideNumber + 1 @if $next == $length $next: 0 // 'type' - label, // ~ .prev:nth-of-type(#{$prev + 1 + $length}), ~ .next:nth-of-type(#{$next + 1 + $length * 2}) animation-delay: $delay * $position
, (-, ?), . .
.
. CSS ( 260 ).
:
, CSS animation Sass Sass Jade
:
.
Source: https://habr.com/ru/post/202844/
All Articles