JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<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>

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;
}

CoffeeScript

startX = 0
curX = 0
oldX = 0

$('.slider').each ->
  $this = $(@)
  $this.wrap '<div class="slider-area">'
  $sliderArea = $this.parents('.slider-area').first()
  $slides = $this.find('.slide')
  slideCount = $slides.length
  slideWidth = $slides.first().width()
  sliderAreaWidth = slideWidth * slideCount
  hasControls = $this.hasClass '.controls'
  
  $this.css 'width', sliderAreaWidth + 'px'
  $this.data 'slide-count', slideCount
  $this.data 'slide-width', slideWidth
  $this.data 'cur-x', 0
  createControls($sliderArea) if hasControls
  
createControls = ($sliderArea) ->
  alert 'controls'