JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-pancakes__slider">
                        <div class="block-pancakes__arrow block-pancakes__arrow-left">
                            <img src="http://savepic.ru/14972720.png" alt="arrow left" class="block-pancakes__slider-img_type_block">
                        </div>
                        <div class="block-pancakes__slider-wrapper">
                            <div class="block-pancakes__slider-container">
                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14978864.png" alt="pancake 1" class="block-pancakes__slider-img_type_block">
                                </div>
                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14993200.png" alt="pancake 2" class="block-pancakes__slider-img_type_block">
                                </div>
                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14973745.png" alt="pancake 3" class="block-pancakes__slider-img_type_block">
                                </div>
                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14993200.png" alt="pancake 4" class="block-pancakes__slider-img_type_block">
                                </div>
                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14973745.png" alt="pancake 5" class="block-pancakes__slider-img_type_block">
                                </div>
                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14978864.png" alt="pancake 6" class="block-pancakes__slider-img_type_block">
                                </div>
                            </div>
           ...

CSS

.block-pancakes__arrow-left, .block-pancakes__arrow-right {
    cursor: pointer;
}

.block-pancakes__arrow-left, .block-pancakes__arrow-right {
    vertical-align: middle;
    height: 110px;
}

.block-pancakes__arrow-left, .block-pancakes__arrow-right, .block-pancakes__slider-img {
    display: inline-block;
}

.block-pancakes__slider-wrapper {
    display: inline-block;
    width: 360px;
    overflow: hidden;
    position: relative;
    height: 90px;
    margin: 0 auto;
}

.block-pancakes__slider-container {
    width: 740px;
    position: absolute;
}

.block-pancakes__slider-img {
    margin: 0 14px;
}

.block-pancakes__arrow-left, .block-pancakes__arrow-right, .block-pancakes__slider-img {
    display: inline-block;
}

.block-pancakes__slider-img_type_block {
    display: block;
}

.block-pancakes-indicators {
    padding-left: 0;
    list-style: none;
    position: absolute;
    left: 35%;
}

.block-pancakes-indicators__item {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 12px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #5a5751;
    border-radius: 14px;
}

.block-pancakes-indicators__item_active {
    margin: 0 12px 0 0;
    background-color: #dabda6;
}

JavaScript

$(function() {
    var $container = $('.block-pancakes__slider-container'),
        $arrow = $('.block-pancakes__arrow'),
        i = 0, len = 2;

    $arrow.on('click', function() {
        var isLeft = $(this).hasClass('block-pancakes__arrow-left');
        i += (isLeft) ? 2 : -2;
        i > len && (i = len);
        i < 0 && (i = 0);
        var left = -i * 190 + "px";
        $container.stop().animate({
            left: left
        }, 300);
    });
});