JSFiddle - React, Tailwind, and code Playground

by D L

HTML

<div class="gallery">
    <div class="gallery__control gallery__control_direction_prev"></div>
    <div class="gallery__control gallery__control_direction_next"></div>
    <div class="gallery__viewport">
        <div class="gallery__list" style='left: 0;'>
            <div class="gallery__item">
                <img class="gallery__item-img" src="http://nautilusdent.ru/images/com_fwgallery/files/975/th_01.jpg" />
            </div>
            <div class="gallery__item">
                <img class="gallery__item-img" src="http://nautilusdent.ru/images/com_fwgallery/files/975/th_02.jpg" />
            </div>
            <div class="gallery__item">
                <img class="gallery__item-img" src="http://nautilusdent.ru/images/com_fwgallery/files/975/th_03.jpg" />
            </div>
            <div class="gallery__item">
                <img class="gallery__item-img" src="http://nautilusdent.ru/images/com_fwgallery/files/975/th_04.jpg" />
            </div>
            <div class="gallery__item">
                <img class="gallery__item-img" src="http://nautilusdent.ru/images/com_fwgallery/files/975/th_04.jpg" />
            </div>
            <div class="gallery__item">
                <img class="gallery__item-img" src="http://nautilusdent.ru/images/com_fwgallery/files/975/th_04.jpg" />
            </div>
        </div>
        <!-- /gallery__list -->
    </div>
    <!-- /gallery__viewport -->
</div>
<!-- /gallery -->
lijnfeilruabaeriubagibgiuaoefbn

<div class="gallery2">
    <div class="gallery__control gallery__control_direction_prev"></div>
    <div class="gallery__control gallery__control_direction_next"></div>
    <div class="gallery__viewport">
        <div class="gallery__list" style='left: 0;'>
            <div class="gallery__item">
                <img class="gallery__item-img" src="http://nautilusdent.ru/images/com_fwgallery/files/975/th_01.jpg" />
            </div>
            <div class="gallery__item">
                <img...

CSS

.gallery, .gallery2 {
    width: 355px;
    position: relative;
    margin: 0 0 0 50px;
}
.gallery__control {
    position: absolute;
    width: 27px;
    height: 29px;
    top: 50%;
    margin: -13px 0 0 0;
    cursor: pointer;
    border: gray solid 1px;
    border-radius: 100%;
}
.gallery__control_direction_prev {
    left: -40px;
}
.gallery__control:before {
    margin: 0 auto;
    left: 50%;
    margin-left: -6px;
    width: 12px;
    top: 5px;
    position: absolute;
}
.gallery__control_direction_prev:before {
    content:'<';
}
.gallery__control_direction_next {
    right: -40px;
}
.gallery__control_direction_next:before {
    content:'>';
}
.gallery__viewport {
    width: 100%;
    overflow: hidden;
}
.gallery__list {
    white-space: nowrap;
    display: inline-block;
    vertical-align: top;
    position: relative;
    transition: left 1s;
}
.gallery__item {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 65px;
    margin: 0 18px 0 0;
    border: 2px solid white;
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
}

JavaScript

$(function () {
    
    // define plugin
    $.fn.carousel = function (options) {
            var list = $(this).find('.gallery__list');
            var items = $(list).find('.gallery__item');
            var itemWidth = items.outerWidth(true);
            var itemsLength = items.length;
            var currentSlideIndex = 0;

            // handle click on conntrolls
            $(this)
                .children('.gallery__control')
                .on('click', function () {
                // get direction
                    var direction = $(this).hasClass('gallery__control_direction_next');

                    console.log(currentSlideIndex);
                // NEXT
                if (direction === 'next') {
                    
                    if(currentSlideIndex > 0) {
                        $(list).css({
                           left: (parseInt(list.css('left'), 10) + itemWidth) + 'px'
                        });
                        --currentSlideIndex; // x = x + 1;
                    }

                // PREV
                } else {
                    
                    // 
                    if(currentSlideIndex < (itemsLength - 2)) {
                        $(list).css({
                            left: (parseInt(list.css('left'), 10) - itemWidth) + 'px'
                        });
                         ++currentSlideIndex;
                        
                    } else {
                        // turn to start
                         $(list).css({
                            left: '0'
                        });
                        currentSlideIndex = 0;
                    }
                }
            });
        }

    

    // use plugin
    $('.gallery').carousel();
    $('.gallery2').carousel();


});