JSFiddle - React, Tailwind, and code Playground

by justinwyllie

HTML

<div id="slider">

  <figure class="figure figure2">
				 <li>
					<img id="pic1" src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
					</li>
					<li>
					<img id="pic2" src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt>
					</li>
					<li>
					<img id="pic3" src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt>
					</li>
					<li>
					<img id="pic4" src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
					</li>
</figure>
      
  
   
       <div id="controls" >

         <label for="slide1">1</label>
        <input name="grp" type="radio" id="slide1">
        <label for="slide2">2</label>
        <input name="grp"   type="radio" id="slide2">
        <label for="slide3">3</label>
        <input name="grp"  type="radio" id="slide3">
        <label for="slide4">4</label>
        <input name="grp"  type="radio" id="slide4">
      
      
      </div>
</div>

CSS

.active 
{
  color:  #ff0000;
}

#controls
{
  clear: both;
}

label
{
  color: #000000;
  margin: 5px;
}

input[type="radio"]
{
  display: inline;
  margin-right: 10px;
}



#company-slider-section {
	width: 100%;
	height: 800px;
  position: relative;
}

div#slider {
	width: 100%;
	/*max-width: 1000px;*/
	overflow: hidden; 
}
div#slider .figure {
	position: relative;
	width: 400%;
	margin: 0;
	padding: 0;
	font-size: 0;
	text-align: left;
  
}

.figure2 {
  animation: 20s company-slider infinite;
}
@keyframes company-slider { 
	0%  { left: 0%; }
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; } 
	75% { left: -300%; }
	95% { left: -300%; }
	100% { left: -300%; } 
}



div#slider figure img {
	width: 25%;
	height: auto;
	float: left;
}
/*div#slider figure:hover { animation-play-state:paused; }*/
div#slider li {
	list-style: none;
}

JavaScript

$('input[name="grp"]').click(function() {
  button = $(this).attr('id');
  //pause the animation
  $('div#slider figure').css('animation-play-state', 'paused');
  //remove the class with the animation
  //this makes the figure have no animation so
  //we can set styles directly
  //and this is why the animation has stopped
  //we've removed the class that applies it
  //so we've killed it.
  $('div#slider figure').removeClass('figure2');
  id = button.replace('slide','');
  pos = (id - 1) * 100;
  posStr = '-' + pos + '%';
  $('.figure').css('left', posStr );
  //remove the active class from all radio buttons first
  //to clear the last selected one
  //using the siblings selector (see jQuery docs)
  $(this).siblings('label').removeClass('active')
  //add it to just the clicked one
  //in jQuery in a click handler 'this' is the 
  //clicked dom element.
  //so wrap it in the jQuery function and select
  //its siblings (all element in the controls)
  //filtered with a selector using an attribute
  //to target just the label we want to set active
  $(this).siblings('[for='+button+']').addClass('active');
  
});

//click the image
$('img').click(function() {
	//add the animation class back again
  $('div#slider figure').addClass('figure2');
  //make sure it is running
  $('div#slider figure').css('animation-play-state', 'running');

})