JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<base href="http://www.webchief.co.uk/blog/simple-jquery-slideshow/">
<div id="slideshow"><span class="nav" id="leftNav" style="display: none;">Move Left</span>
     <div id="slideshowWindow">
    	<div id="slidesHolder" style="width: 1500px; margin-left: 0px;"><div class="slide" style="float: left;">
        	     <img src="slide1.jpg">
                 <div class="slideText">
                     <h2 class="slideTitle">Slide 1</h2>
                     <p class="slideDes">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     <p class="slideLink"><a href="#">click here</a></p>
                 </div><!--/slideText-->
            </div><div class="slide" style="float: left;">
        	 <img src="slide2.jpg">
	<div class="slideText">
                     <h2 class="slideTitle">Slide 2</h2>
                     <p class="slideDes">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     <p class="slideLink"><a href="#">click here</a></p>
                 </div><!--/slideText-->
        </div><div class="slide" style="float: left;">
        	 <img src="slide3.jpg">
	<div class="slideText">
                     <h2 class="slideTitle">Slide 3</h2>
                     <p class="slideDes">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     <p class="slideLink"><a href="#">click here</a></p>
                 </div><!--/slideText-->
        </div></div><!--/slide-->
        <!--/slide-->
        <!--/slide-->
     </div><!--/slideshowWindow-->
<span class="nav" id="rightNav" style="display: block;">Move Right</span></div>

CSS

#slideshow{height:100%;
   
}
 img{width:100%;
    height:100%;}

#slideshow #slideshowWindow {


	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
}

#slideshow #slideshowWindow .slide {
    display:inline;
    margin:0;
    height:100%;
    width:auto;
	padding:0;
	float:left;
	position:relative;
}
.nav {
    
	display:block;
    width:50%;
    
	text-indent:-10000px;
	position:absolute;
	cursor:pointer;
}

#leftNav {
	top:223px;
	left:0px;
	width:94px;
	height:34px;
	background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/previous.png);
	background-repeat:no-repeat;
	z-index:999;
}

#rightNav {
    position:absolute;

    
	top:225px;
	right:0%;
	width:53px;
	height:26px;
	background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/next.png);
	background-repeat:no-repeat;
	z-index:999;
}

JavaScript

$(document).ready(function() {
							   
		var currentPosition = 0;
		var slideWidth = $('img')[0].getBoundingClientRect().width;
		var slides = $('.slide');
		var numberOfSlides = slides.length;
		var slideShowInterval;
		var speed = 3000;

		//Assign a timer, so it will run periodically
		slideShowInterval = setInterval(changePosition, speed);
		
		slides.wrapAll('<div id="slidesHolder"></div>')
		
		slides.css({ 'float' : 'left' });
		
		//set #slidesHolder width equal to the total width of all the slides
		$('#slidesHolder').css('width', slideWidth * numberOfSlides);
		
		$('#slideshow')
			.prepend('<span class="nav" id="leftNav">Move Left</span>')
			.append('<span class="nav" id="rightNav">Move Right</span>');
		
		manageNav(currentPosition);
		
		//tell the buttons what to do when clicked
		$('.nav').bind('click', function() {
			
			//determine new position
			currentPosition = ($(this).attr('id')=='rightNav')
			? currentPosition+1 : currentPosition-1;
										
			//hide/show controls
			manageNav(currentPosition);
			clearInterval(slideShowInterval);
			slideShowInterval = setInterval(changePosition, speed);
			moveSlide();
		});
		
		function manageNav(position) {
			//hide left arrow if position is first slide
			if(position==0){ $('#leftNav').hide() }
			else { $('#leftNav').show() }
			//hide right arrow is slide position is last slide
			if(position==numberOfSlides-1){ $('#rightNav').hide() }
			else { $('#rightNav').show() }
		}

		
		/*changePosition: this is called when the slide is moved by the 
        timer and NOT when the next or previous buttons are clicked*/
		function changePosition() {
			if(currentPosition == numberOfSlides - 1) {
				currentPosition = 0;
				manageNav(currentPosition);
			} else {
				currentPosition++;
				manageNav(currentPosition);
			}
			moveSlide();
		}
		
		
		//moveSlide: this function moves the slide 
		function moveSlide() {
				$('#slidesHolder')
                  .animate({'marginLeft' :...