JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Заголовок</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
<body>
<div class="slider_bg">
<div class="slider">
<div class="slide-wrap">
    <div class="item">
        <div class="top">изображение1</div>
        <div class="bottom">контент</div>
    </div>
    <div class="item">
        <div class="top">изображение2</div>
        <div class="bottom">контент</div>
    </div>
    <div class="item">
        <div class="top">изображение3</div>
        <div class="bottom">контент</div>
    </div>
    <div class="item">
        <div class="top">изображение4</div>
        <div class="bottom">контент</div>
    </div>
    <div class="item">
        <div class="top">изображение5</div>
        <div class="bottom">контент</div>
    </div>
</div>
</div>
</div>
<div class="slider_bg">
<div class="slider">
<div class="slide-wrap">
    <div class="item">
        <div class="top">изображение1</div>
        <div class="bottom">контент</div>
    </div>
    <div class="item">
        <div class="top">изображение2</div>
        <div class="bottom">контент</div>
    </div>
    <div class="item">
        <div class="top">изображение3</div>
        <div class="bottom">контент</div>
    </div>
    <div class="item">
        <div class="top">изображение4</div>
        <div class="bottom">контент</div>
    </div>
    <div class="item">
        <div class="top">изображение5</div>
        <div class="bottom">контент</div>
    </div>
</div>
</div>
</div>
</body>
</html>

CSS

.slider_bg {
        height:200px;
        width:600px;
        background: -webkit-linear-gradient(left,  #f2183d 0%,#61c1f2 99%);
            background: -o-linear-gradient(top left,  #f2183d 0%,#61c1f2 99%);
            background: -moz-linear-gradient(top left,  #f2183d 0%,#61c1f2 99%);
            background: -ms-linear-gradient(top left,  #f2183d 0%,#61c1f2 99%);
            background: linear-gradient(top left,  #f2183d 0%,#61c1f2 99%);
            overflow:hidden;
            padding:10px;
        }
        .slider {  /* Окно слайдера */
            width:600px;
            height:200px;
            overflow:hidden;
            position:absolute;
                    }
        .slide-wrap {  /* Слой с объектами, ширина 10000 - чтобы помещалось много товаров */
            position:relative;
            overflow:hidden;
            width:10000px;
left:0;            
        }
        .item {   /* Видимая часть блока с товаром*/
            width:200px;
            height:200px;
            position:relative;
            top:0;
            left:0;
            border:1px solid;
            float:left;
            background:#fff;
        }
        .top {  /* Верхняя часть блока */
            position:absolute;
            width:200px;
            height:200px;
            top:0;
            left:0
        }
        .bottom {  /* Выезжающая часть блока */
            width:200px;
            height:0px;
            background-color:green;
            position:relative;
            top:200px
        }
        .prev, .next {  /* Кнопки управления слайдером */
            position:absolute;
            width:20px;
            height:20px;
            background:green;
            cursor:pointer;
            top:50%;
            z-index:25;
        }
        .next {
            left:550px;
        }

JavaScript

$(function(e){
    /* Скролл */
    $(".item").hover(
        function() {
            $(".bottom", this)
            .stop()
            .animate({height: 330 + "px", top: 0 + "px", opacity: 1});
        },
        function() {
            $(".bottom")
            .stop()
            .animate({height: 0 + "px", top: 330 + "px", opacity: 0});
        });
    /* Слайдер */
    var $linkArrow = $('<a name="prev" class="prev" href="#">&lt;</a><a name="next"  class="next" href="#">&gt;</a>').prependTo('.slider');
    
    $(".next").click(function(){
        slide("next");
        return false;
        });
    $(".prev").click(function(){
        slide("prev");
        return false;
        });
        
    var slide = function(arrow) {
        this.slideWrap = $('.slide-wrap');
        this.slideWidth = $('.item').outerWidth();
        this.left = slideWrap.position().left - slideWidth;
        if (arrow == "next") {
            this.slideWrap.stop().animate({left: left}, 500, function(){
                this.slideWrap
                    .find('.item:first')
                    .appendTo(this.slideWrap)
                    .parent()
                    .css({'left': 0});
            });
        }
        else if (arrow == "prev") {
            this.slideWrap
                .css({'left': left})
                .find('.item:last')
                .prependTo(this.slideWrap)
                .parent()
                .stop()
                .animate({left: 0}, 500);
        }
        };
    
});