JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="slider-container">
    <div class="mySlider">
        <img src="http://placehold.it/450x150&text=Photo 1" />
        <img src="http://placehold.it/350x150&text=Photo 2" />
        <img src="http://placehold.it/250x150&text=Photo 3" />
        <img src="http://placehold.it/150x150&text=Photo 4" />
        <img src="http://placehold.it/550x150&text=Photo 5" />
        <img src="http://placehold.it/350x350&text=Photo 6" />
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.mySlider {
    background-color: rgba(0, 0, 0, 1);
    display: block;
    height: auto;
    position: relative;
    width: auto;
    overflow: hidden;
}

.mySlider img {
        top: 0;
        opacity: 0;
        position: absolute;
    }

.mySlider .prev {
        left: 100%;
  	transition: all .5s ease-in;
    }

.mySlider .active {
        left: 0;
        opacity: 1;
        z-index: 1;
        transition: all .5s ease-in;
    }

.mySlider .next {
        left: -100%;
  	transition: all .5s ease-in;
    }

.slider-container {
	background-color: red;
	padding: 10px;
	display: inline-block;
	height: auto;
	width: auto;
}

JavaScript

'use strict';
(function($) {

    $.mySlider = function(selector, settings) {
        // settings
        var config = {
            'autoplay': true,
            'dir': 'left'
        };

        if (settings) {
            $.extend(config, settings);
        }

        // variables
        var slider = $(selector),
            img = slider.children('img'),
            count = img.length,
            i = 0,
            delay = 2000;

        // Set container width and height
        function updateContainerSize() {
            slider.width($('.active').width());
            slider.height($('.active').height());
        }

        // show first image
        img.eq(0).addClass('active');
        updateContainerSize();

        // Next and prev function
        function next() {
            img.eq(i).removeClass('active');
            i = (i + 1 == count) ? 0 : i + 1;
            img.eq(i).nextAll().removeClass('prev').addClass('next');
            img.eq(i).prevAll().removeClass('next').addClass('prev');
            img.eq(i).removeClass('next').removeClass('prev').addClass('active');
            if (i == count - 1) {
                img.eq(0).removeClass('prev').addClass('next');
            }
            updateContainerSize();
        }

        function prev() {
            img.eq(i).removeClass('active');
            i = (i - 1 <= -1) ? count - 1 : i - 1;
            img.eq(i).nextAll().removeClass('prev').addClass('next');
            img.eq(i).prevAll().removeClass('next').addClass('prev');
            img.eq(i).removeClass('next').removeClass('prev').addClass('active');
            if (i == 0) {
                img.eq(count - 1).removeClass('next').addClass('prev');
            }
            updateContainerSize();
        }

        // run autoplay
        if (config.autoplay == true) {

            setInterval(function() {
                if (config.dir == 'left') {
                    next();
                } else {
                    prev();
         ...