このCSSスライダをオートプレイとしてのみ作成するにはどうすればよいですか？

Question

このスライダーを自動再生とすることは可能ですが、これはLESSなしでも簡単なCSSでできますか？このスライダーの作成者はLESSを使用していますが、私の場合は単純なCSSを使用します。しかし、私が正しいとすれば、これを自動再生のようにするにはどこかの@animationが必要です。

Codepen：https://codepen.io/drygiel/pen/rtpnE

はここ

はLESSせずに、簡単なCSSです、ありがとう：

.csslider { 
    -moz-perspective: 1300px; 
    -ms-perspective: 1300px; 
    -webkit-perspective: 1300px; 
    perspective: 1300px; 
    display: inline-block; 
    text-align: left; 
    position: relative; 
    margin-bottom: 22px; 
} 
.csslider > input { 
    display: none; 
} 
.csslider > input:nth-of-type(10):checked ~ ul li:first-of-type { 
    margin-left: -900%; 
} 
.csslider > input:nth-of-type(9):checked ~ ul li:first-of-type { 
    margin-left: -800%; 
} 
.csslider > input:nth-of-type(8):checked ~ ul li:first-of-type { 
    margin-left: -700%; 
} 
.csslider > input:nth-of-type(7):checked ~ ul li:first-of-type { 
    margin-left: -600%; 
} 
.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type { 
    margin-left: -500%; 
} 
.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type { 
    margin-left: -400%; 
} 
.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type { 
    margin-left: -300%; 
} 
.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type { 
    margin-left: -200%; 
} 
.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type { 
    margin-left: -100%; 
} 
.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type { 
    margin-left: 0%; 
} 
.csslider > ul { 
    position: relative; 
    width: 820px; 
    height: 420px; 
    z-index: 1; 
    font-size: 0; 
    line-height: 0; 
    background-color: #3a3a3a; 
    border: 10px solid #3a3a3a; 
    margin: 0 auto; 
    padding: 0; 
    overflow: hidden; 
    white-space: nowrap; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.csslider > ul > li { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    font-size: 15px; 
    font-size: initial; 
    line-height: normal; 
    -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); 
    -o-transition: all 0.5s ease-out; 
    -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); 
    transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -webkit-background-size: cover; 
    background-size: cover; 
    vertical-align: top; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    white-space: normal; 
} 
.csslider > ul > li.scrollable { 
    overflow-y: scroll; 
} 
.csslider > .navigation { 
    position: absolute; 
    bottom: -8px; 
    left: 50%; 
    z-index: 10; 
    margin-bottom: -10px; 
    font-size: 0; 
    line-height: 0; 
    text-align: center; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 
.csslider > .navigation > div { 
    margin-left: -100%; 
} 
.csslider > .navigation label { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    border-radius: 50%; 
    margin: 0 4px; 
    padding: 4px; 
    background: #3a3a3a; 
} 
.csslider > .navigation label:hover:after { 
    opacity: 1; 
} 
.csslider > .navigation label:after { 
    content: ''; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -6px; 
    margin-top: -6px; 
    background: #71ad37; 
    border-radius: 50%; 
    padding: 6px; 
    opacity: 0; 
} 
.csslider > .arrows { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 
.csslider.inside .navigation { 
    bottom: 10px; 
    margin-bottom: 10px; 
} 
.csslider.inside .navigation label { 
    border: 1px solid #7e7e7e; 
} 
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after, 
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after, 
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after, 
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after, 
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after, 
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after, 
.csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after, 
.csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after, 
.csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after, 
.csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after, 
.csslider > input:nth-of-type(11):checked ~ .navigation label:nth-of-type(11):after { 
    opacity: 1; 
} 
.csslider > .arrows { 
    position: absolute; 
    left: -31px; 
    top: 50%; 
    width: 100%; 
    height: 26px; 
    padding: 0 31px; 
    z-index: 0; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 
} 
.csslider > .arrows label { 
    display: none; 
    position: absolute; 
    top: -50%; 
    padding: 13px; 
    box-shadow: inset 2px -2px 0 1px #3a3a3a; 
    cursor: pointer; 
    -moz-transition: .15s; 
    -o-transition: .15s; 
    -webkit-transition: .15s; 
    transition: .15s; 
} 
.csslider > .arrows label:hover { 
    box-shadow: inset 3px -3px 0 2px #71ad37; 
    margin: 0 0px; 
} 
.csslider > .arrows label:before { 
    content: ''; 
    position: absolute; 
    top: -100%; 
    left: -100%; 
    height: 300%; 
    width: 300%; 
} 
.csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type, 
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0), 
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1), 
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2), 
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3), 
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4), 
.csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5), 
.csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(6), 
.csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(7), 
.csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(8), 
.csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(9), 
.csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(10) { 
    display: block; 
    left: 0; 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 
.csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type, 
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2), 
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3), 
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4), 
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5), 
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6), 
.csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(7), 
.csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(8), 
.csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(9), 
.csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(10), 
.csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(11), 
.csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(12) { 
    display: block; 
    right: 0; 
    -moz-transform: rotate(225deg); 
    -ms-transform: rotate(225deg); 
    -o-transform: rotate(225deg); 
    -webkit-transform: rotate(225deg); 
    transform: rotate(225deg); 
} 
/*#region MODULES */ 
/*#endregion */ 

Answer 1

自動再生は、JSやCSS3アニメーションによって達成することが可能です。この回答の

http://codepen.io/drygiel/pen/xjJsC

出典：

https://github.com/drygiel/csslider/issues/1

（著者によって：ダミアンDrygiel）

CODE：ここ

はデモです

- var config = { 
- count: 6,    // total count of slides in this slider 
- default_slide: 1,  // slide showed by default 
- infinity: true,   // if true navigation arrows never disapears 
- inside: false,   // if true navigation dots apears inside of slider box 
- group_name: 'slides', // each slider on page has to have another group name 
- presentation_mode: false, // if false generates skeleton only 
- } 

if(config.presentation_mode) 
    h1(style="padding-top: 60px;") CSS Slider 
    h2 Pure CSS Slider. No JS. Because it is possieble! 

- var _list = new Array(config.count); 
div.csslider#slider1(class=(config.inside? 'inside ':'') + (config.infinity? 'infinity':'')) 

    each _ , i in _list 
     input(type='radio', 
      name=config.group_name, 
      checked=(config.default_slide == i+1), 
      id=config.group_name+'_'+(i+1)) 

    ul 
     each _ , i in _list 
     if(config.presentation_mode) 
      li(class=(i==3? 'scrollable':'')) 
      case i 
       when 0 
       h1 Say hello to CSS3 
       p CSSlider is lightweight & easy to use slider. No JS - pure CSS. 
       when 1 
       img(src='http://rawgithub.com/drygiel/csslider/master/examples/themes/stones.jpg') 
       when 2 
       div#bg 
        div 
        h1 CSS Events 
        p When slide 3 is reached - play CSS animation! 
       when 3    
       h1 Lots of text 
       h2 Scrollable one 
       p. 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, 
        semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, 
        semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, 
        semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, 
        semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, 
        semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, 
        semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
       when 4 
       div#center 
        a.nice-link(href='https://github.com/drygiel/csslider', 
           data-text='More examples on github', 
           target='_blank') More examples on github 
       when 5 
       div#center 
        a#dex-sign.play(href='http://drygiel.com', target='_blank') 
       default 
       | Slide #{i+1} 
     else 
      li Slide #{i+1} 

    div.arrows 
     each _ , i in _list 
     label(for=config.group_name+'_'+(i+1)) 
     label(for=config.group_name+'_'+(1), class="goto-first") 
     label(for=config.group_name+'_'+(config.count), class="goto-last") 

    div.navigation 
     div 
     each _ , i in _list 
      label(for=config.group_name+'_'+(i+1)) 

if(config.presentation_mode) 
    a(href='https://github.com/drygiel', target='_blank') 
    img(style='position: absolute; top: 0; left: 0; border: 0;', 
     src='https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png', 
     alt='Fork me on GitHub') 

CSS：

// CONFIG 

// Main 
@border-size: 10px; 
@slider-inner-width: 800px; 
@slider-inner-height: 400px; 
// CODEPEN: Did you know that if you put cursor (caret) in color #text and press [ALT] key you can choose color form picker? 
@slider-main-color: #71ad37; 
@slider-back-color: #3A3A3A; 
@max-slides: 10; 

// Dot 
@dot-outer-size: 4px; 
@dot-inner-size: 6px; 
@dot-distance: 4px; 
@dot-distance-top: 10px; 
@dot-main-color: @slider-main-color; 
@dot-back-color: @slider-back-color; 

// Arrow 
@arrow-type: 'lite'; // standard | lite 
@arrow-size: 13px; 
@arrow-distance: 15px; 
@arrow-hover-shift: 0px; 
@arrow-color: @slider-back-color; 
@arrow-hover-color: @slider-main-color; 

@speed: .5s; 
@easing: cubic-bezier(.4,1.3,.65,1); // ease-out 

.csslider {  
    -moz-perspective: 1300px; 
    -ms-perspective: 1300px; 
    -webkit-perspective: 1300px; 
    perspective: 1300px; 
    display: inline-block; 
    text-align: left; 
    position: relative; 
    margin-bottom: @dot-distance + @dot-distance-top + 2 * @dot-outer-size; 

    > input { 
     display: none; 

     .loopingClass (@index) when (@index > 0) { 
      &:nth-of-type(@{index}):checked ~ ul li:first-of-type { 
       margin-left: -100% * (@index - 1); 
      } 

      .loopingClass(@index - 1); 
     } 

     .loopingClass(@max-slides); 
    } 

    > ul { 
     position: relative; 
     width: @slider-inner-width + 2 * @border-size; 
     height: @slider-inner-height + 2 * @border-size; 
     z-index: 1; 
     font-size: 0; 
     line-height: 0; 
     background-color: @slider-back-color; 
     border: @border-size solid @slider-back-color; 
     margin: 0 auto; 
     padding: 0; 
     overflow: hidden; 
     white-space: nowrap; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 

     > li { 
      position: relative; 
      display: inline-block; 
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
      font-size: 15px; 
      font-size: initial; 
      line-height: normal; 
      -moz-transition: all @speed @easing; 
      -o-transition: all @speed ease-out; 
      -webkit-transition: all @speed @easing; 
      transition: all @speed @easing; 
      vertical-align: top; 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
      box-sizing: border-box; 
      white-space: normal; 

      &.scrollable { 
       overflow-y: scroll; 
      } 
     } 
    } 

    > .navigation { 
     position: absolute; 
     bottom: -2 * @dot-outer-size; 
     left: 50%; 
     z-index: 10; 
     margin-bottom: -@dot-distance-top; 
     font-size: 0; 
     line-height: 0; 
     text-align: center; 
     .noSelect(); 

     > div { 
      margin-left: -100%; 
     } 

     label { 
      position: relative; 
      display: inline-block; 
      cursor: pointer; 
      border-radius: 50%; 
      margin: 0 @dot-distance; 
      padding: @dot-outer-size; 
      background: @dot-back-color; 

      &:hover:after { 
       opacity: 1; 
      } 

      &:after { 
       content: ''; 
       position: absolute; 
       left: 50%; 
       top: 50%; 
       margin-left: -@dot-inner-size; 
       margin-top: -@dot-inner-size; 
       background: @dot-main-color; 
       border-radius: 50%; 
       padding: @dot-inner-size; 
       opacity: 0; 
      } 
     } 
    } 

    > .arrows { 
     .noSelect(); 

     .goto-first, 
     .goto-last { 

     } 
    } 

    &.inside .navigation { 
     bottom: @border-size; 
     margin-bottom: @dot-distance-top; 

     label { 
      border: 1px solid #7e7e7e;    
     } 
    } 
} 

& { 
    .repeat('.csslider > input:nth-of-type( $i ):checked ~ .navigation label:nth-of-type( $i ):after,'); 
    @{result} 
    { 
     opacity: 1; 
    } 
} 

.render-arrow(); 

.repeat(@pattern) { 

    @to_repeat: ~'@{pattern}'; 
    @result: ~`(function(){ 
     var result = ''; 

     for(var i=1; i < @{max-slides} + 2; i++) { 
      result += "@{to_repeat}\n" 
         .replace(/\s*\$im1\s*/g, i - 1) 
         .replace(/\s*\$ip1\s*/g, i + 1) 
         .replace(/\s*\$i\s*/g, i); 
     } 
     return result.replace(/[,\s]+$/,''); 
    })()`; 
} 

.noSelect() {   
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

/*#region MODULES */ 


.render-arrow() when (@arrow-type = 'lite') { 
    @arrow-thickness: 2px; 
    @arrow-thickness-hover: 3px; 

    .csslider > .arrows { 
     position: absolute; 
     left: -@arrow-size - 3px - @arrow-distance; 
     top: 50%; 
     width: 100%; 
     height: 2 * @arrow-size; 
     padding: 0 @arrow-size + 3px + @arrow-distance; 
     z-index: 0; 
     -moz-box-sizing: content-box; 
     -webkit-box-sizing: content-box; 
     box-sizing: content-box; 

     label { 
      display: none; 
      position: absolute; 
      top: -50%;    
      padding: @arrow-size; 
      box-shadow: inset @arrow-thickness -@arrow-thickness 0 (@arrow-thickness - 1px) @arrow-color; 
      cursor: pointer; 
      -moz-transition: box-shadow .15s, margin .15s; 
      -o-transition: box-shadow .15s, margin .15s; 
      -webkit-transition: box-shadow .15s, margin .15s; 
      transition: box-shadow .15s, margin .15s; 

      &:hover { 
       box-shadow: inset @arrow-thickness-hover -@arrow-thickness-hover 0 (@arrow-thickness-hover - 1px) @arrow-hover-color; 
       margin: 0 -@arrow-hover-shift; 
      } 

      &:before { 
       content: ''; 
       position: absolute; 
       top: -100%; 
       left: -100%; 
       height: 300%; 
       width: 300%; 
      } 
     } 
    } 

    // Left conditions 
    & { 
     .repeat('.csslider > input:nth-of-type( $i ):checked ~ .arrows > label:nth-of-type( $im1 ),'); 
     .csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last, 
     @{result} 
     { 
      display: block;    
      left: 0; 
      right: auto; 
      -moz-transform: rotate(45deg); 
      -ms-transform: rotate(45deg); 
      -o-transform: rotate(45deg); 
      -webkit-transform: rotate(45deg); 
      transform: rotate(45deg); 
     } 
    } 

    // Right conditions 
    & { 
     .repeat('.csslider > input:nth-of-type( $i ):checked ~ .arrows > label:nth-of-type( $ip1 ),'); 
     .csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first, 
     @{result} 
     { 
      display: block; 
      right: 0; 
      left: auto; 
      -moz-transform: rotate(225deg); 
      -ms-transform: rotate(225deg); 
      -o-transform: rotate(225deg); 
      -webkit-transform: rotate(225deg); 
      transform: rotate(225deg); 
     } 
    } 
} 

.render-arrow() when (@arrow-type = 'standard') { 

    .csslider > .arrows { 
     position: absolute; 
     left: -@arrow-size - @arrow-distance + 2px; 
     top: 50%; 
     width: 100%; 
     height: 2 * @arrow-size; 
     padding: 0 @arrow-size + @arrow-distance - 2px; 
     z-index: 0; 
     -moz-box-sizing: content-box; 
     -webkit-box-sizing: content-box; 
     box-sizing: content-box; 

     label { 
      display: none; 
      position: absolute; 
      top: -50%; 
      width: 0; 
      height: 0; 
      border-top: @arrow-size solid transparent; 
      border-bottom: @arrow-size solid transparent; 
      border-left: @arrow-size solid @arrow-color; 
      border-right: @arrow-size solid @arrow-color; 
      cursor: pointer; 
      -moz-transition: margin .15s; 
      -o-transition: margin .15s; 
      -webkit-transition: margin .15s; 
      transition: margin .15s; 

      &:hover { 
       border-left-color: @arrow-hover-color; 
       border-right-color: @arrow-hover-color; 
       margin: 0 -@arrow-hover-shift; 
      } 

      &:before { 
       content: ''; 
       position: absolute; 
       top: -@arrow-size; 
       left: -@arrow-size - @arrow-hover-shift - @arrow-distance; 
       height: @arrow-size*2; 
       width: 2 * (@arrow-size + @arrow-distance + @arrow-hover-shift); 
      } 
     } 
    } 

    // Left conditions 
    & { 
     .repeat('.csslider > input:nth-of-type( $i ):checked ~ .arrows > label:nth-of-type( $im1 ),'); 
     .csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last, 
     @{result} 
     { 
      display: block; 
      left: 0; 
      right: auto; 
      border-left: none; 
     } 
    } 

    // Right conditions 
    & { 
     .repeat('.csslider > input:nth-of-type( $i ):checked ~ .arrows > label:nth-of-type( $ip1 ),'); 
     .csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first, 
     @{result} 
     { 
      display: block; 
      right: 0; 
      left: auto; 
      border-right: none; 
     } 
    } 
} 

/*#endregion */ 



/*___________________________________ LAYOUT ___________________________________ */ 
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700|Lato); 

* { 
    margin: 0; 
    padding: 0; 
} 

::-webkit-scrollbar { 
    width: 2px; 
    background: rgba(255, 255, 255, 0.1); 
} 

::-webkit-scrollbar-track { 
    background: none; 
} 

::-webkit-scrollbar-thumb { 
    background: rgba(74, 168, 0, 0.6); 
} 

ul, ol { 
    padding-left: 40px; 
} 

html, body { 
    height: 100%; 
    overflow-x: hidden; 
    text-align: center; 
    font: 400 100% 'Raleway', 'Lato'; 
    background-color: #282828; 
    color: #CCC; 
} 

body { 
    padding-bottom: 60px; 
} 

h1 { 
    font-weight: 700; 
    font-size: 310%; 
} 

h2 { 
    font-weight: 400; 
    font-size: 120%; 
    color: #71AD37; 
} 

#slider1 { 
    margin: 20px; 
    font-family: 'Lato'; 
} 

    #slider1 > ul > li:nth-of-type(3) { 
     background: url(https://raw.github.com/drygiel/csslider/master/examples/themes/fruit.jpg); 
    } 

    // On Slide 3 Reached Event 
    // Transition is added here to instantly hide when slide is changed 
    #slider1 > input:nth-of-type(3):checked ~ ul #bg { 
     width: 80%; 
     padding: 22px; 
     -moz-transition: .5s .5s; 
     -o-transition: .5s .5s; 
     -webkit-transition: .5s .5s; 
     transition: .5s .5s; 
    } 

     #slider1 > input:nth-of-type(3):checked ~ ul #bg div { 
      -moz-transform: translate(0); 
      -ms-transform: translate(0); 
      -o-transform: translate(0); 
      -webkit-transform: translate(0); 
      transform: translate(0); 
      -moz-transition: .5s .9s; 
      -o-transition: .5s .9s; 
      -webkit-transition: .5s .9s; 
      transition: .5s .9s; 
     } 

    #slider1 > input:nth-of-type(6):checked ~ ul #dex-sign 
    { 
     -moz-animation: sign-anim @sign-duration .5s steps(@sign-frames) forwards; 
     -o-animation: sign-anim @sign-duration .5s steps(@sign-frames) forwards; 
     -webkit-animation: sign-anim @sign-duration .5s steps(@sign-frames) forwards; 
     animation: sign-anim @sign-duration .5s steps(@sign-frames) forwards; 
    } 

#bg { 
    color: #000; 
    padding: 22px 0; 
    position: absolute; 
    left: 0; 
    top: 16%; 
    height: 20%; 
    width: 0; 
    z-index: 10; 
    overflow: hidden; 
} 
    // Blurry background 
    #bg:before { 
     content: ''; 
     position: absolute; 
     left: -1px; 
     top: 1px; 
     height: 100%; 
     width: 100%; 
     z-index: -1; 
     background: url(https://raw.github.com/drygiel/csslider/master/examples/themes/fruit.jpg) 1px 23%; 
     -webkit-filter: blur(7px); 
    } 

    #bg:after { 
     content: ''; 
     position: absolute; 
     left: 0; 
     top: 0; 
     height: 100%; 
     width: 100%; 
     z-index: 20; 
     background: rgba(0, 0, 0, 0.35); 
     pointer-events: none; 
    } 

    #bg div { 
     -moz-transform: translate(120%); 
     -ms-transform: translate(120%); 
     -o-transform: translate(120%); 
     -webkit-transform: translate(120%); 
     transform: translate(120%); 
    } 

.scrollable p { 
    padding: 30px; 
    text-align: justify; 
    line-height: 140%; 
    font-size: 120%; 
} 

#center { 
    text-align: center; 
    margin-top: 25%; 

    a { 
     text-decoration: none; 
     text-transform: uppercase; 
     letter-spacing: 2px; 
     font-variant: small-caps; 
    } 
} 
/*___________________________________ LINK ___________________________________ */ 
// More info here: http://codepen.io/drygiel/pen/hkgGq 
a.nice-link { 
    @color: @slider-main-color; 
    @hover-color: lighten(spin(saturate(@color, 50%), -8), 8%); 

    position: relative; 
    color: @color; 
    h1 &:after { 
     border-bottom: 1px solid @hover-color; // Underline 
    } 

    &:after { 
     text-align: justify; 
     display: inline-block; 
     content: attr(data-text); 
     position: absolute; 
     left: 0; 
     top: 0; 
     white-space: nowrap; 
     overflow: hidden; 
     color: @hover-color; 
     min-height: 100%; 
     width: 0; 
     max-width: 100%; // 'cause of IE bug 
     background: @slider-back-color; 
     -moz-transition: .3s; 
     -o-transition: .3s; 
     -webkit-transition: .3s; 
     transition: .3s; 
    } 

    &:hover { 
     color: @color; // To override default hover color 

     &:after { 
      width: 100%; 
     } 
    } 
} 

/*___________________________________ SIGN ___________________________________ */ 
// More info here: http://codepen.io/drygiel/pen/KbhmA 
@sign-x: 255px; 
@sign-y: 84px; 
@sign-frames: 85; 
@sign-duration: 3.5s; 
@sign-total: @sign-frames * -@sign-y; 

#dex-sign { 
    width: @sign-x; 
    height: @sign-y; 
    position: absolute; 
    left: 33%; 
    top: 45%; 
    opacity: .7; 
    background: url(http://www.drygiel.com/projects/sign/frames-255-white.png) 0 0 no-repeat; 
    &:hover { 
    opacity: 1; 
    -webkit-filter: ~'invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg)'; 
    } 
} 
@-webkit-keyframes sign-anim { 
    to { 
     background-position: 0 @sign-total; 
    } 
} 
@-moz-keyframes sign-anim { 
    to { 
     background-position: 0 @sign-total; 
    } 
} 
@keyframes sign-anim { 
    to { 
     background-position: 0 @sign-total; 
    } 
} 

JS：

// Autoplay 

setInterval(function() { 
    var $curr = $('#slider1 input[type=radio]:checked'); 
    var $next = $curr.next('input'); 
    if(!$next.length) $next = $('#slider1 input[type=radio]').first(); 
    $next.prop('checked', true); 

}, 2000);