JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="slider-container">
    <div class="arrows left"><<<</div>
    <div class="arrows right">>>></div>
    <ul id="slider">
        <li class="slide">
            <img class="responsive_img" src="images/gallery/1.jpg" />
        </li>
        <li class="slide current">
            <img class="responsive_img" src="images/gallery/2.jpg" />
        </li>
        <li class="slide">
            <img class="responsive_img" src="images/gallery/3.jpg" />
        </li>
        <li class="slide">
            <img class="responsive_img" src="images/gallery/4.jpg" />
        </li>
        <li class="slide">
            <img class="responsive_img" src="images/gallery/5.jpg" />
        </li>
        <li class="slide">
            <img class="responsive_img" src="images/gallery/6.jpg" />
        </li>
        <li class="slide">
            <img class="responsive_img" src="images/gallery/7.jpg" />
        </li>
        <li class="slide">
            <img class="responsive_img" src="images/gallery/8.jpg" />
        </li>
        <li class="slide">
            <img class="responsive_img" src="images/gallery/9.jpg" />
        </li>
        <li class="slide">
            <img class="responsive_img" src="images/gallery/10.jpg" />
        </li>
    </ul>
</div>

CSS

body{
	background-color:rgb(169, 169, 169);
}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	user-select: none;
}

.clearfix{
	clear: both;
}
.slider-container{
	display:block;
	position:relative;
	width:30%;
	height: auto;
	margin:0 auto;
}

#slider{
	display:block;
	position:relative;
	width:100%;
	height:auto;
	list-style: none;
	border:5px solid #ccc;
}

.slide{
	display:block;
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
	transform:scale(0);
	transition:all .5s ease-in-out;
}

.responsive_img{
	width: 100%;
	height: auto;
}

.current{
	display:block;
	position:relative;
	z-index:1;
	width:100%;
	height: auto;
	transform:scale(1);
}
.prev{
	display:block;
	position:absolute;
	width:100%;
	height: auto;
	left:-100%;
}
.next{
	display:block;
	position:absolute;
	width:100%;
	height: auto;
	left:100%;
}
.arrows{
	display:block;
	position: absolute;
	z-index:2;
	top:45%;
	color:#fff;
	border:1px solid #ccc;
	background-color:rgba(0,0,0,0.5);
	border-radius:5px;
	padding:5px 10px;
	cursor:pointer;
	opacity: 0.3;
	transition:all .2s ease;
}
.right:hover,
.left:hover{
	opacity: 1;
}

.left{
	left:8px;
}

.right{
	right:8px;
}

JavaScript

$(document).ready(function(){
	slider();
});
function slider(){
	var slide = $('.slide');
	var sliderCount = slide.length;
	var currentSlide = $('#slider .current');

	$('.right').on('click', function(){

		if(currentSlide.index() === slide.length - 1){
			slide.eq(0).addClass('current');
            currentSlide = $('#slider .current');
        }else{
            currentSlide.next().addClass('current').removeClass('prev, next');
            currentSlide.removeClass('current');
            currentSlide = $('#slider .current');
            currentSlide.nextAll().addClass('next');
            currentSlide.prevAll().addClass('prev');
        }
        
	});

	$('.left').on('click', function(){

		if(currentSlide.index() === 0){
			slide.eq(sliderCount - 1).addClass('current');
            currentSlide = $('#slider .current');
        }else{
            currentSlide.prev().addClass('current').removeClass('next, prev');
		    currentSlide.removeClass('current');
		    currentSlide = $('#slider .current');
            currentSlide.nextAll().addClass('next');
            currentSlide.prevAll().addClass('prev');
        }
	});
}