JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="homepage-slider-wrap">
    <div class="homepage-slider-content">
        <div class="inner-slide"></div>
        <div class="inner-slide"></div>
        <div class="inner-slide"></div>
        <div class="inner-slide"></div>
    </div>    
</div>

<div class="slider-scroll-wrap">
    <div class="slider-scroll-bar"></div>
</div>  

<div class="homepage-slider-nav-wrap">
    <div id="left" class="homepage-slider-nav-left"></div>
    <div id="right" class="homepage-slider-nav-right"></div>
</div>

CSS

.homepage-slider-wrap {
    position: relative;
    width: 100%;
    height: 310px;
    margin-top: 35px;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: 1;
}

.homepage-slider-content {
    position: absolute;
    height: 300px;
    top: 0;
    left: 50%;
    margin-left: -200px;
}
.inner-slide {
    height: 300px;
    width: 400px;
    float: left;
    background: pink;
}
.inner-slide:nth-child(odd) {
    background: red;
}

.slider-scroll-wrap {
    position: absolute;
    width: 400px; height: 10px;
    background: silver;
    left: 50%; margin-left: -200px;
}

.slider-scroll-bar {
    position: absolute;
    width: 80px; height: 100%;
    background: blue;
    cursor: pointer;
}

.homepage-slider-nav-wrap {
    position: relative;
    width: 100%;
    height: 56px;
    margin: 0 auto;
    margin-top: -198px;
    margin-bottom: 210px;
    z-index: 10;
}
.homepage-slider-nav-left {
    position: absolute;
    left: 0;
    cursor: pointer;
    width: 32px;
    height: 56px;
    background: black;
}
.homepage-slider-nav-right {
    position: absolute;
    right: 0;
    cursor: pointer;
    width: 32px;
    height: 56px;
    background: black;
}

JavaScript

$(document).ready(function () {
    var animating = false,
        slideWidth = $('.inner-slide').width(),
        $wrapper = $('.homepage-slider-wrap'),
        slideIndex = 2,
        slideLen = $('.inner-slide').length;

    var n = $(".inner-slide").length,
        width = 400,
        newwidth = width * n * 2;

    $('.homepage-slider-content').css({
        'width': newwidth
    });

    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('.homepage-slider-content').append($firstClone, $secondClone).prepend($preLastClone, $lastClone);
        $wrapper.animate({
            scrollLeft: '+=' + slideWidth * slideIndex + 'px'
        }, 0);
    },
    slide = function (dir, speed) {
        if (!animating) {
            animating = true;
            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'
          ...