🤜 🌠 😭 सीएसएस स्लाइड शो (सास) 🧑🏿‍🤝‍🧑🏻 🆒 ❗️

विषय, इसे हल्के ढंग से रखने के लिए, नया नहीं है, बहुत सारे लेख हैं - स्मैशिंग मैगज़ीन और ब्लॉग्स पर , साथ ही सरल कार्यान्वयन ( स्रोत कोड , केवल वह हिस्सा जो एनिमेशन की चिंता करता है)। लेकिन, घातक दोष के अलावा, इन कार्यान्वयनों में वास्तविक खामियां हैं - पहले दो विकल्प नियंत्रण प्रदान नहीं करते हैं, और बाद वाला प्रदान करता है, लेकिन जब आप स्लाइड स्विच करते हैं, तो एनीमेशन बंद हो जाता है और आपको इसे फिर से शुरू करना होगा। शायद हम कह सकते हैं कि यह एक विशेषता है, लेकिन मैं स्लाइड शो के व्यवहार को पूरी तरह से पैरोडी करना चाहता था जैसे कि यह जावास्क्रिप्ट में लिखा गया था (जो अंत में अभी भी विफल रहा है) - अर्थात, जब आप स्विच करते हैं तो एनीमेशन जारी रहता है, लेकिन चयनित स्लाइड से शुरू होता है।
जिसे पढ़ने के लिए बहुत आलसी - तुरंत अंतिम परिणाम ।

स्लाइड परिवर्तन

मुंहतोड़ पत्रिका में प्रस्तुत संस्करण में, प्रत्येक स्लाइड के लिए अपना स्वयं का एनीमेशन बनाया जाता है -

#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; }

और आगे सभी एनिमेशन cycle , cycletwo , आदि के लिए। @keyframes का वर्णन किया गया है और कोड काफी बड़ा है।

यदि सभी स्लाइड उसी तरह एनिमेटेड हैं, तो यह विकल्प बेमानी है - बस एक एनीमेशन बनाएं और प्रत्येक स्लाइड के लिए एक अलग animation‑delay साथ सेट animation‑delay । हम :nth‑child तत्व के साथ मिलेंगे :nth‑child । तदनुसार, यदि प्रत्येक स्लाइड 3 सेकंड के लिए प्रदर्शित होती है, तो i-th स्लाइड के लिए, देरी 3 * (i - 1) होगी, उदाहरण के लिए, li:nth‑child(1) { animation‑delay: 0s } । पूरे एनीमेशन के दौरान, स्लाइड को पहले थोड़ी देर के लिए प्रदर्शित किया जाता है, फिर इसे छिपाया जाता है और पुनरावृत्ति के अंत तक छिपा रहता है।

चर:

 //     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

स्वयं एनीमेशन:

 //         .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

इस चरण में परिणाम ।

जो 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

यह समझा जाना चाहिए कि यह कोड पूरी तरह से ईमानदार नहीं है - इस तथ्य के बावजूद कि चक्र केवल तीन लाइनें हैं, प्रत्येक $i के लिए एक अलग सीएसएस नियम बनाया जाएगा -

 .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; }

इस प्रकार, सीएसएस की मात्रा [इस स्तर पर] स्लाइड की संख्या के सापेक्ष रैखिक रूप से बढ़ेगी। और इसलिए, मैं अस्थायी रूप से यह भूल जाने का सुझाव देता हूं कि सीएसएस है, जैसे कि हम भविष्य में हैं और हमारे पास स्मार्ट ब्यूरर्स हैं जो सैस को कुशलता से संसाधित कर सकते हैं । इस धारणा के बिना, लेख को आगे पढ़ना डरावना होगा।

स्लाइड पर जाएं

स्लाइड में संक्रमण को व्यवस्थित करने के लिए, हमें पहले सीखने की जरूरत है, वर्तमान स्थिति को संग्रहीत करने की, और दूसरी बात - इस स्थिति को बदलने में सक्षम होने के लिए। यह रेडियो इनपुट का उपयोग करके किया जा सकता है। वर्तमान में कौन सा इनपुट सक्रिय है, इसके आधार पर, हम बस उस क्रम को बदलेंगे जिसमें तत्व दिखाई देते हैं। इसलिए, यदि पहला इनपुट सक्रिय है, तो कतार 1, 2, 3, 4 , यदि दूसरा सक्रिय है - 4, 1, 2, 3 , आदि। यही है, सक्रिय एनटी इनपुट के साथ, हम सी-क्रम को n ‑ 1 स्थिति से दाईं ओर स्थानांतरित करते हैं। परीक्षण पड़ोसी चयनकर्ता ~ का उपयोग करके किया जाएगा। उदाहरण के लिए, input:nth‑of‑type(1):checked ~ .slider li (पढ़ें - यदि सूची से पहले पहला इनपुट सक्रिय है, तो ऐसी और ऐसी शैली लागू करें)। इस मामले में, इनपुट को उस सूची के सामने रखा जाना चाहिए जिसमें स्लाइड हैं।

पिछले मामले की तरह ही वैरिएबल और @keyframes भी समान हैं।

 //        . 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

इस चरण में परिणाम ।

सच है, अगर पिछले मामले में सीएसएस स्लाइड की संख्या में वृद्धि के साथ रैखिक रूप से बढ़ी, तो अब एक द्विघात निर्भरता होती है। लेकिन, हम इसके बारे में नहीं सोचने के लिए सहमत हुए।

वर्तमान इनपुट हाइलाइट कर रहा है ...

... अपने आप से असंभव। अर्थात्, हम उन्हें CSS का उपयोग करके स्विच नहीं कर सकते हैं। लेकिन हम चेतन कर सकते हैं

 ,   ,     .    -              - -            ( , -  ,   ?)   ,      . ,      .            .  ,          -   ,   ,      ,    . ,      . 
 
 //    @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: #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: #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: #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 : .

सीएसएस स्लाइड शो (सास)

स्लाइड परिवर्तन

स्लाइड पर जाएं

वर्तमान इनपुट हाइलाइट कर रहा है ...

More articles: