JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outerwrapper">
    <div class="innerwrapper">
        <div class="inner-slide">SLIDE 01</div>
        <div class="inner-slide">SLIDE 02</div>
        <div class="inner-slide">SLIDE 03</div>
        <div class="inner-slide">SLIDE 04</div>
        <div class="inner-slide">SLIDE 05</div>
        <div class="inner-slide">SLIDE 06</div>
        <div class="inner-slide">SLIDE 07</div>
    </div>
</div>
<ul id="slide-menu">
    <li id="one" class="slide-menu-item">01</li>
    <li id="two" class="slide-menu-item">02</li>
    <li id="three" class="slide-menu-item">03</li>
    <li id="four" class="slide-menu-item">04</li>
    <li id="five" class="slide-menu-item">05</li>
    <li id="six" class="slide-menu-item">06</li>
    <li id="seven" class="slide-menu-item">07</li>
</ul>
<div id="left">LEFT</div>
<div id="right">RIGHT</div>

CSS

.outerwrapper {
    position: absolute;
    left: 50%;
    height: 250px;
    width: 400px;
    margin-left: -225px;
    border: 1px solid black;
    overflow: hidden;
    padding-left: 50px;
}
.innerwrapper {
    height: 250px;
    width: 4000px;
}
.inner-slide {
    height: 250px;
    width: 350px;
    float: left;
    background: silver;
}
.innerwrapper div:nth-child(odd) {
    background: silver;
}
.innerwrapper div:nth-child(even) {
    background: red;
}
#left, #right {
    position: absolute;
    cursor: pointer;
}
#left {
    left: 10px;
    bottom: 10px;
}
#right {
    right: 10px;
    bottom: 10px;
}
#slide-menu {
    position: absolute;
    top: 250px;
    list-style: none;
}
.slide-menu-item {
    display: inline-block;
    width: 50px;
    cursor: pointer;
}

JavaScript

var animating = false,
    slideWidth = $('.inner-slide').width(),
    $wrapper = $('.outerwrapper'),
    slideIndex = 2,
    slideLen = $('.inner-slide').length,

    build = function () {
        $firstClone = $('.inner-slide').eq(0).clone();
        $secondClone = $('.inner-slide').eq(1).clone();
        $preLastClone = $('.inner-slide').eq(slideLen - 2).clone();
        $lastClone = $('.inner-slide').eq(slideLen - 1).clone();
        $wrapper.find('.innerwrapper').append($firstClone, $secondClone).prepend($preLastClone, $lastClone);
        $wrapper.animate({
            scrollLeft: '+=' + slideWidth * slideIndex + 'px'
        }, 0);
    },
    slide = function (dir, speed) {
        if (!animating) {
            animating = false;
            dir == 'right' ? slideIndex++ : slideIndex--;
            slideIndex == slideLen - 1 ? slideIndex == 0 : '';

            if (slideIndex == 0 && dir == 'left') {
                //if the slide is at the beginning and going left

                slideIndex = slideLen + 1;
                $wrapper.animate({
                    scrollLeft: slideIndex * slideWidth + 'px'
                }, 0, function () {
                    animating = false;
                });
                slideIndex--;

            } else if (slideIndex == slideLen + 2 && dir == 'right') {
                //if the slide is at the end and going right

                slideIndex = 1;
                $wrapper.animate({
                    scrollLeft: slideIndex * slideWidth + 'px'
                }, 0, function () {
                    animating = false;
                });
                slideIndex++;

            }
            $wrapper.animate({
                scrollLeft: slideIndex * slideWidth + 'px'
            }, speed, function () {
                animating = false;
            });
        }
    },
    slideTo = function (index, speed) {
        slideIndex = index+1;
        $wrapper.animate(
            {scrollLeft: slideIndex * slideWidth...