JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="slider controls bodyclass">
    <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>

CSS

body{
    font-smoothing: antialiased;
}
.slide{
    margin: 0;
    height: 20em;
    background: gray;
    float: left;
}
.slide,
.slider-area{
    width: 30em;
}
.slider{
    position: relative;
    -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;
}

CoffeeScript

$(document).ready ->
    $('.slider').each ->
        $this = $(@)
        actualSlide = 0
        $this.wrap('<div class="slider-area">')
        $sliderArea = $this.parents('.slider-area').first()
        $slides = $this.find('.slide')
        slideCount = $slides.length
        slideWidth = $slides.first().width()
        $this.width((slideCount * slideWidth) + 'px')

        if $this.hasClass 'controls'
            $nextButton = $('<a href="#">Next slide</a>')
            $prevButton = $('<a href="#">Previous slide</a>')
            
            $nextButton.click ->
                actualSlide = moveLeft $this, actualSlide, slideCount, slideWidth                 
                return false
                
            $prevButton.click ->
                actualSlide = moveRight $this, actualSlide, slideCount, slideWidth 
                return false
            
            $sliderArea.after($nextButton)
            $sliderArea.before($prevButton)

moveLeft = ($this, actualSlide, slideCount, slideWidth) ->
    actualSlide++
    actualSlide = 0 if actualSlide >= slideCount
        
    # $this.css 'left', (-slideWidth * actualSlide) + 'px'
    $this.css 'transform', 'translate3d('+(-slideWidth * actualSlide) + 'px, 0, 0)'
    return actualSlide

moveRight = ($this, actualSlide, slideCount, slideWidth) ->
    actualSlide--
    actualSlide = slideCount - 1 if actualSlide < 0
        
    # $this.css 'left', (-slideWidth * actualSlide) + 'px'
    $this.css 'transform', 'translate3d('+(-slideWidth * actualSlide) + 'px, 0, 0)'
    return actualSlide