JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<!-- розмітка слайдера -->
    
    <div id="carousel_wrapper">
    
    <div id="slideshow">
        <div class="slide slide1">
            <img width="400" src="https://dummyimage.com/400x400/000/fff&text=1" alt="">
        </div>
        <div class="slide slide2">
            <img width="400" src="https://dummyimage.com/400x400/000/fff&text=2" alt="">
        </div>
        <div class="slide slide3">
            <img width="400" src="https://dummyimage.com/400x400/000/fff&text=3" alt="">
        </div>
        <div class="slide slide4">
            <img width="400" src="https://dummyimage.com/400x400/000/fff&text=4" alt="">
        </div>
        <div class="slide slide5">
            <img width="400" src="https://dummyimage.com/400x400/000/fff&text=5" alt="">
        </div>
    </div>
    <div style="height: 30px;"></div>
    <div class="prev">
      Prev
    </div>
    <div class="next">
      Next
    </div>
    
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#carousel_wrapper {
  min-height: 400px;
        width: 800px;
        overflow: hidden;        
}
#slideshow {
  height: 400px;
        width: 2000px;
        overflow: hidden;
        position: relative;
}
#slideshow div {
        position: relative;
        float: left;
    }
    #slideshow div img {
        /*position: absolute;
        left: 0;
        top: 0;*/
        
        height: 400px;
        width: 400px;
    }

JavaScript

// запускаемо наш слайдер
        /*$("#slideshow > div:gt(0)").hide();
        setInterval(function() {
            $('#slideshow > div:first')
                .fadeOut(500) // швидкість зникання блоку
                .next()
                .fadeIn(1000) // швидкість появи блоку
                .end()
                .detach()
                .appendTo('#slideshow');
        }, 3000); // швидкість зміни блоків*/
        
        
        $('#slideshow > div:first')
                .detach()
                .appendTo('#slideshow');
        
        var i=1;
        $('.prev').on('click',function(){
        i++;
        	/*$("#slideshow > div:gt(0)").hide();*/
        
            /*$('#slideshow > div:first')
                .detach()
                .appendTo('#slideshow')
                .fadeOut(500) // швидкість зникання блоку
                .prev()
                .fadeIn(1000) // швидкість появи блоку
                .end();*/
            /*$('#slideshow').css({ "transform": "translateX(-51px)" });*/
            $('#slideshow > div:first')
                .detach()
                .appendTo('#slideshow');
            $('#slideshow').css({ "left": "-=400px" });
        });
        
        $('.next').on('click',function(){
        	$("#slideshow > div:gt(0)").hide();
        
            $('#slideshow > div:first')
                .fadeOut(500) // швидкість зникання блоку
                .next()
                .fadeIn(1000) // швидкість появи блоку
                .end()
                .detach()
                .appendTo('#slideshow');
        });