JSFiddle - React, Tailwind, and code Playground

by Ray Mak

HTML

<div id="wrapper">
	<div id="inoddSlider">
		<ul>
			<li>
				<img src="http://placehold.it/500x350">
				<div><h1>Image 1</h1>
					<a href="">GET DETAILS</a>
				</div>
			</li>
			<li>
				<img src="http://placehold.it/500x350">
				<div><h1>Image 2</h1>
					<a href="">GET DETAILS</a>
				</div>
			</li>
			<li>
				<img src="http://placehold.it/500x350">
				<div>
					<h1>Image 3</h1>
					<a href="">GET DETAILS</a>
				</div>
			</li>
		</ul>
	</div>
	<div class="slider-nav">
		<span class="prev">&lt;</span>
		<span class="next">&gt;</span>
	</div>
</div>

CSS

/* CSS Document */

body {
  margin: 0 auto;
  padding: 0;
  background-color: #dcedcf;
  max-width: 100%;
}

#wrapper {
  display: block;
  clear: both;
  min-height: 675px;
  margin: 0 auto;
  max-width: 90%;
}

/****************
    Slidder
****************/

#inoddSlider {
  white-space: nowrap;
  width: 100%;
  max-height: 450px; 
  overflow-x: hidden;
  overflow-y: hidden;
}

#inoddSlider ul {
  width: 100%;
  margin: 0;
  padding: 0;
}

#inoddSlider li {
/*  width: 100% !important;
  max-height: 450px;*/
  display: inline-block;
}

#inoddSlider li div {
  position: absolute;
  float: left;
  left: 6%;
  top: 2%;
  color: white;
  z-index: 1;
}

#inoddSlider li img {
  width: 100% !important;
  max-height: 450px;
}

.slider-nav {
    position: relative;
    top: -155px;
}

.slider-nav span {
  display: none;
}

.prev {
  float: left;   
}

.next {
    float: right;
}

JavaScript

// JavaScript source code

var sliderSettings = {
    'speed': "1500" // user numbers to set the speed such as 1000, 1500, 2000, etc. 1 sec is equals to 1000 milliseconds.
};


var getSlider = $("#inoddSlider li"),   // Get all the list items
    sliderNav = $(".slider-nav span"), // Get nav buttons
    buttonNext = $('.next'),
    buttonPrev = $('.prev');

$(getSlider).first().addClass('active');
$(getSlider).hide();
sliderNav.show();
$('.active').show();

var slideNext = function () {
    $('.active').removeClass('active').addClass('oldActive');
    ($('.oldActive').is(':last-child')) ? $(getSlider).first().addClass('active') : $('.oldActive').next().addClass('active');
    $('.oldActive').removeClass('oldActive');
    $(getSlider).fadeOut();
    $('.active').fadeIn(parseInt(sliderSettings['speed']));
}

var slidePrev = function () {
    $('.active').removeClass('active').addClass('oldActive');
    ($('.oldActive').is(':first-child')) ? $(getSlider).last().addClass('active') : $('.oldActive').prev().addClass('active');
    $('.oldActive').removeClass('oldActive');
    $(getSlider).fadeOut();
    $('.active').fadeIn();
}

$(buttonNext).click(function () {
    slideNext();
});

$(buttonPrev).click(function () {
    slidePrev();
});

var startInterval  = function() {
    interval = setInterval(slideNext, 5000);
}

$(getSlider).hover(function () {
    clearInterval(interval);
}, function() {
    startInterval();
});

startInterval();