JSFiddle - React, Tailwind, and code Playground

by Shanna Barnard

HTML

<div id="myslider-container">
  <div id="myslider">
    <ul>
      <li id="slide-01">SLIDE 1</li>
      <li id="slide-02">SLIDE 2</li>
      <li id="slide-03">SLIDE 3</li>
      <li id="slide-04">SLIDE 4</li>
    </ul>
  </div>

  <div id="myslider-topic">
    <a href="#" class="control_prev"><span></span></a>
      
    <ul>  
      <li>
        <input type="radio" id="target-slide-01" name ="selectSlide" value="1">
        <label for="target-slide-01">Slide 1</label>
      </li>
      
      <li>
        <input type="radio" id="target-slide-02" name ="selectSlide" value="2">
        <label for="target-slide-02">Slide 2</label>
      </li>
      
      <li>
        <input type="radio" id="target-slide-03" name ="selectSlide" value="3">
        <label for="target-slide-03">Slide 3</label>
      </li>
    
      <li>
        <input type="radio" id="target-slide-04" name ="selectSlide" value="4">
        <label for="target-slide-04">Slide 4</label>
      </li>
      
    </ul>
    
    <a href="#" class="control_next"><span></span></a>
  </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);	

html {
  background: #ededed;
  color: white;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

.animate {
  transition: transform 0.3s ease-out;
}

#myslider-container {
  width: 300px;
  height: auto;
  margin: 0 auto;
  display: block;
}

@media (min-width: 625px) {
  #myslider-container {
    width: 500px;
    height: auto;
    margin: 0 auto;
    display: block;
  }
}

#myslider {
  width: 100%;
  height: auto;
  margin: 20px auto 0 auto;
  overflow: hidden;
}

#myslider ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

#myslider ul li {
  margin: 0;
  padding: 0;
  background: #2d2d2d;
  color: white;
  text-align: center;
  line-height: 285px;
  float: left;
}

#myslider-topic {
  width: 100%;
  position: relative;
  margin: 20px auto 0 auto;
  display: inline-block;
}

#myslider-topic ul {
  width: 75%;
  height: auto;
  margin: 0 auto;
  padding: 0 12.5%;
  list-style: none;
  table-layout: fixed;
  display: table;
}

#myslider-topic ul li {
  width: 2%;
  margin: 0;
  padding: 10px 0;
  text-align: center;
  display: table-cell;
}

#myslider-topic ul li > label {
  color: #5f5f5f;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: block;
}

@media (min-width: 625px) {
  #myslider-topic ul li > label {
    font-size: 1em;
  }
}

input[type=radio] { 
  position: absolute;
  visibility: hidden;
}

input[type=radio] ~ label {
  padding: 5% 15%;
}

input[type=radio]:checked ~ label {
  background-color: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(95,95,95,0.5) !important;
  border-radius: 4px;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
}

a.control_prev, a.control_next {
  width: 10%;
  height: 45%;
  margin: 0;
  padding: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(95,95,95,1);
  border-radius: 4px;
  color:...

JavaScript

$(function() {
   
  // Key animation.
  
  var myTimer = setInterval(function () {
    moveRight();
  }, 5000);
  
  $(selection).click(function() {
    clearInterval(myTimer);
    setTimeout(function() {
      myTimer = setInterval(function () {
      moveRight();
      }, 5000);
    });
  });
    
  var containerWidth = $('#myslider').innerWidth();
  var containerHeight = $('#myslider').height();
  var slideWidth = $('#myslider ul li').width();
  var slideHeight = $('#myslider ul li').height();
  var slider = containerWidth * containerHeight;
    
  var selection = $('input:radio[name="selectSlide"]');
  
  //var theFirst = $('#myslider ul li').find(':first');
  
  $('#myslider ul li').css({ width: containerWidth, height: containerHeight });
  
  $('#myslider ul').css({ width: slider });
  
  // Key animation functions.
  
    function moveLeft() {
        $('#myslider ul').animate({
            left: +containerWidth
        }, 600, function () {
            $('#myslider ul > li:last-child').insertBefore('#myslider ul > li:first-child');
            $(this).css('left', '');
        });
    }

    function moveRight() {
        $('#myslider ul').animate({
            left: -containerWidth
        }, 600, function () {
          $('#myslider ul > li:first-child').insertAfter('#myslider ul > li:last-child');
            $(this).css('left', '');
        });
    }
    
  // Check radio button with corresponding slide. 
    
  $('input:radio[name="selectSlide"]').change(function() {
    if ($('#slide-01').is(':first') ) {
      $('#target-slide-01').prop('checked', true);
    } else {
      $('#target-slide-01').prop('checked', false);
    }
  
    if ($('#slide-02').is(':first') ) {
      $('#target-slide-02').prop('checked', true);
    } else {
      $('#target-slide-02').prop('checked', false);
    }
  
    if ($('#slide-03').is(':first') ) {
      $('#target-slide-03').prop('checked', true);
    } else {
      $('#target-slide-03').prop('checked', false);
    }
...