JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="mySlider">
    <img class="active" src="http://placehold.it/350x150&text=Photo 1" />
    <img src="http://placehold.it/350x150&text=Photo 2" />
    <img src="http://placehold.it/350x150&text=Photo 3" />
    <img src="http://placehold.it/350x150&text=Photo 4" />
    <img src="http://placehold.it/350x150&text=Photo 5" />
    <img src="http://placehold.it/350x150&text=Photo 6" />
</div>

SCSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.mySlider {
    background-color: rgba(0, 0, 0, 1);
    display: inline-flex;
    height: auto;
    padding: 10px;
    width: auto;
    
    img {
        left: 10px;
        top: 10px;
        opacity: 0;
        position: absolute;
    }
    
    .active {
        top: auto;
        left: auto;
        opacity: 1;
        position: relative;
        z-index: 1;
    }
}

JavaScript

'use strict';
(function($){
    console.log('run');
    $.mySlider = function(selector, settings){
        // settings
        var config = {
            'delay': 2000,
            'fadeSpeed': 500
        };
        if ( settings ){$.extend(config, settings);}
 
        // variables
        var slider = $(selector);
        var img = slider.children('img');
        var count = img.length;
        var i = 0;
 
        // show first image
        img.eq(0).addClass('active');
 
        // run slideshow
        setInterval(function(){
            img.eq(i).removeClass('active');
            i = ( i+1 == count ) ? 0 : i+1;
            img.eq(i).addClass('active');
        }, config.delay);
 
        return this;
    };
})(jQuery);

$(document).ready(function(){
    mySlider('.mySlider');
});