JSFiddle - React, Tailwind, and code Playground

by webviper

HTML

<div class="sliderContainer">
		<div class="slider">
			<article class="slider-slide">
				<h1 class="slider-slide-title">Slide 1</h1>		
			</article>
			<article class="slider-slide">
				<h1 class="slider-slide-title">Slide 2</h1>			
			</article>
			<article class="slider-slide">
				<h1 class="slider-slide-title">Slide 3</h1>			
			</article>
			<article class="slider-slide">
				<h1 class="slider-slide-title">Slide 4</h1>			
			</article>
		</div>

		<div class="slider">
			<article class="slider-slide">
				<h1 class="slider-slide-title">Slide 1</h1>			
			</article>
			<article class="slider-slide">
				<h1 class="slider-slide-title">Slide 2</h1>			
			</article>
			<article class="slider-slide">
				<h1 class="slider-slide-title">Slide 3</h1>			
			</article>
			<article class="slider-slide">
				<h1 class="slider-slide-title">Slide 4</h1>			
			</article>
			<article class="slider-slide">
				<h1 class="slider-slide-title">Slide 5</h1>			
			</article>
			<article class="slider-slide">
				<h1 class="slider-slide-title">Slide 6</h1>			
			</article>
		</div>
	</div>
	<div class="sliderSetting">
		<span class="sliderIndex"></span>
		<span class="slideIndex"></span>
		<span role="button" tabindex="0" class="nextSlide"></span>
		<span role="button" tabindex="0" class="prevSlide"></span>
		<span role="button" tabindex="0" class="nextSlider"></span>
		<span role="button" tabindex="0" class="prevSlider"></span>
	</div>

CSS

/* -------  *****     RESET     *****  -------- */
button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
    border: 0 none !important;
    padding: 0 !important;
}
:focus {
	outline: none;
}
/* -------  *****     END RESET     *****  -------- */
body {
	margin: 0;
	font: 20px 'Open Sans', Tahoma, sans-serif;
}
.hidden {
	display: none;
}
.sliderContainer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
}
.slider {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.slider-slide {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border: 30px solid #4D3B41;
	left: 0;
	top: 0;
	overflow: auto;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	background: #FFF;
}
.slide_current {	
	-o-transform: translate(0px);
	-moz-transform: translate(0px);
	-webkit-transform: translate(0px);
	transform: translate(0px);
}
.slide_next {	
	-o-transform: translate(100%);
	-moz-transform: translate(100%);
	-webkit-transform: translate(100%);
	transform: translate(100%);
}
.slide_prev {	
	-o-transform: translate(-100%);
	-moz-transform: translate(-100%);
	-webkit-transform: translate(-100%);
	transform: translate(-100%);
}			
.sliderSetting {

}
.sliderIndex {
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	overflow: hidden;
	background: #F2F2F2;
}
.slideIndex {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 60px;
	height: 30px;
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 30px;
	text-align: center;
	overflow: hidden;
	background: #F2F2F2;
}
.nextSlide {
	position: absolute;
	right: 0;
	top: 5%;
	height: 90%;
	width: 30%;
	z-index: 5;
	cursor:...

JavaScript

/**
 * vSlider
 */
(function($) {
	$.fn.vSlider = function(o){   /*   ---  vSlider Options   ---   */
		o = $.extend({
		
			startSlider: 0,
			settingSelector: '.sliderSetting'
			
		}, o || {}); 
		return this.each(function(){
		
			var $slider_container = $(this);
			var $slider_items = $slider_container.children();
			var $slide_items = $slider_items.children();	
			var n_slider = $slider_items.length;
			var point = 0;
			var point_slider = o.startSlider;
			var $slider_current = $slider_items.eq(point);
			var $slide_current;
			var $slide_next;
			var $slide_prev;
			var current_slide_n = $slider_current.children().length;
			
			var $slider_index = $(o.settingSelector).find('.sliderIndex');
			var $slide_index = $(o.settingSelector).find('.slideIndex');
			var $next_btn_slide = $(o.settingSelector).find('.nextSlide');
			var $prev_btn_slide = $(o.settingSelector).find('.prevSlide');
			var $next_btn_slider = $(o.settingSelector).find('.nextSlider');
			var $prev_btn_slider = $(o.settingSelector).find('.prevSlider');

			$(function init(){			
				$slider_items.each(function(){
					var $slider = $(this);
					var $slide_items = $slider.children();
					var n = $slider.children().length;
					var slider_index = $slider.index();
					
					$slider.attr('data-id', slider_index);
					if (slider_index == o.startSlider) {
						initNewSlider($slider, slider_index);
					}
					
					if (o.settingSelector != '' && typeof o.settingSelector === 'string') {
						if ($slider_index) {
							$slider_index.text(point_slider + 1);
						}
						if ($slide_index) {
							$slide_index.text(point + 1 +'/'+ current_slide_n);
						}
					}
				});
			});
			
			function initNewSlider($slider, point_slider){				
				$slider_items.css('display', 'none');
				$slide_items.css('display', 'none').removeClass('slide_current slide_next slide_prev');
				point = 0;
				$slider_current = $slider;
				current_slide_n = $slider_current.children().length;
				if (point_slider == 0)...