CSS-only slideshow

JS only for cursor navigation

by rdub80

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="slideshow" class="csslider">

  <input type="radio" name="slides" id="slides_1" checked />
  <input type="radio" name="slides" id="slides_2" />
  <input type="radio" name="slides" id="slides_3" />
  <input type="radio" name="slides" id="slides_N" />

  <ul>                                
    <li><img src="http://placehold.it/560x346" alt="image 1 alt text" /></li>
    <li><img src="http://placehold.it/560x346" alt="image 2 alt text" /></li>
    <li><img src="http://placehold.it/560x346" alt="image 3 alt text" /></li>
  </ul>

	<div class="arrows">
      <label for="slides_1"></label>
      <label for="slides_2"></label>
      <label for="slides_3"></label>
      <label for="slides_N" class="goto-last"></label>
  </div>

  <div class="navigation">
     <div>
       <label for="slides_1"></label>
       <label for="slides_2"></label>
       <label for="slides_3"></label>
       <label for="slides_N"></label>
    </div>
  </div>
</div><!-- #slideshow -->

SCSS

#slideshow{
    width: 47rem;
    margin: 0 0 0 13%;
    padding: 1rem 2rem;
    img {
      width: 100%;
      height: auto;
    }
}
.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: 100%;
    height: 420px;
    height: auto;
    z-index: 1;
    font-size: 0;
    line-height: 0;
    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...

JavaScript

jQuery(document).ready( function($) {

  var slideshow = $('#slideshow');
  
  function variableselect() {
    // if only one, go forward or back, but don't keep shifting around
    if( slideshow.find('.arrows label:visible').length == 1 ) {
      return slideshow.find('.arrows label:visible:last');
    }

    switch (event.which) {

      //next
      case 37:
          return slideshow.find('.arrows label:visible:first');

      // prev
      case 39:
          return slideshow.find('.arrows label:visible:last');

      default:
          return event.preventDefault;
    }
  }

  $( document ).on( 'keydown', function(event) {
    if( event.which == 37 || event.which == 39) {
      variableselect( event.which ).click();
    }
  });

});