JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<h2>Slider A</h2>
<div class="slider controls bodyclass animated">
    <figure class="slide first-slide">
        <h2>First slide</h2>
    </figure>
    <figure class="slide second-slide">
        <h2>Second slide</h2>
    </figure>
    <figure class="slide third-slide">
        <h2>Third slide</h2>
    </figure>
</div>
<h2>Slider B</h2>
<div class="slider controls bodyclass animated">
    <figure class="slide first-slide">
        <h2>First slide</h2>
    </figure>
    <figure class="slide second-slide">
        <h2>Second slide</h2>
    </figure>
    <figure class="slide third-slide">
        <h2>Third slide</h2>
    </figure>
  <figure class="slide fourth-slide">
        <h2>Fourth slide</h2>
    </figure>
</div>

CSS

body{
    font-smoothing: antialiased;
}
.slide{
    margin: 0;
    height: 20em;
    background: gray;
    float: left;
}
.slide,
.slider-area{
    width: 30em;
}
.slider{
    position: relative;
}
.slider.animated{
    -webkit-transition: -webkit-transform 400ms ease-in-out;
    -moz-transition: -moz-transform 400ms ease-in-out;
    -ms-transition: -ms-transform 400ms ease-in-out;
    -o-transition: -o-transform 400ms ease-in-out;
    transition: transform 400ms ease-in-out;
}
.slider-area{
    overflow: hidden;
}

.first-slide{
    background: #C98862;
}
.second-slide{
    background: #C775A5;
}
.third-slide{
    background: #CADD74;
}

JavaScript

var startX = 0;
var curX = 0;
var oldX = 0;

$('.slider').each(function() {
    var $this = $(this);
    $this.wrap('<div class="slider-area">');
    var $sliderArea = $this.parents('.slider-area').first();
    var slideCount = $this.find('.slide').length;
    var slideWidth = $this.find('.slide').first().width();
    var sliderStyleWidth = slideWidth * slideCount;
    var hasControls = $this.hasClass('controls');

    $this.css('width', sliderStyleWidth + 'px');
    $this.data('slide-count', slideCount);
    $this.data('slide-width', slideWidth);
    $this.data('cur-x', 0);

    if (hasControls) {
        var $prevBtn = $('<a href="#">Previous slide</a>');
        $prevBtn.click(function() {
            $this = $(this);
            var $slider = $this.next('.slider-area').find('.slider');

            var element = $slider.get(0);
            var slideCurX = $slider.data('cur-x');
            var slideWidth = $slider.data('slide-width');
            var slideCount = $slider.data('slide-count');

            var max = -((slideCount * slideWidth) - slideWidth);

            var nextSlide = slideCurX + slideWidth;

            if (nextSlide > 0) {
                nextSlide = max;
            }

            $slider.data('cur-x', nextSlide);
            element.style.webkitTransform = 'translate3d(' + nextSlide + 'px, 0, 0)';
            return false;
        });
        var $nextBtn = $('<a href="#">Next slide</a>');
        $nextBtn.click(function() {
            $this = $(this);
            var $slider = $this.prev('.slider-area').find('.slider');
            var element = $slider.get(0);
            var slideCurX = $slider.data('cur-x');
            var slideWidth = $slider.data('slide-width');
            var slideCount = $slider.data('slide-count');

            var max = -((slideCount * slideWidth) - slideWidth);

            var nextSlide = slideCurX - slideWidth;

            if (nextSlide < max) {
                nextSlide = 0;
            }

           ...