JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<nav class="controls">
    <button id="prev">Previous</button>
    <label>
        <input type="radio" name="transition" value="effect-slide" checked="checked" />&nbsp;Slide</label>
    <label>
        <input type="radio" name="transition" value="effect-fade" />&nbsp;Fade</label>
    <label>
        <input type="radio" name="transition" value="effect-stack" />&nbsp;Stack</label>&nbsp;|
    <label>
        <input type="radio" name="content" value="photo" checked="checked" />&nbsp;Photo</label>
    <label>
        <input type="radio" name="content" value="color" />&nbsp;Color</label>
    <label>
        <input type="radio" name="content" value="text" />&nbsp;Text</label>
    <button id="next">Next</button>
</nav>
<ul id="photo" class="slideshow effect-slide">
    <li class="slide">
        <img src="http://staging.goizueta.emory.edu/images/superslider/slider_evmba_emorygate.jpg" />
    </li>
    <li class="slide">
        <img src="http://staging.goizueta.emory.edu/images/superslider/slider_evmba_premierestudents.jpg" />
    </li>
    <li class="slide">
        <img src="http://staging.goizueta.emory.edu/images/superslider/superslider_evmba_cohort.jpg" />
    </li>
    <li class="slide">
        <img src="http://staging.goizueta.emory.edu/images/superslider/superslider_evmba_electives.jpg" />
    </li>
    <li class="slide">
        <img src="http://staging.goizueta.emory.edu/images/superslider/superslider_evmba_networking.jpg" />
    </li>
</ul>
<ul id="color" class="slideshow effect-slide">
    <li class="slide"><div class="content"></div></li>
    <li class="slide"><div class="content"></div></li>
    <li class="slide"><div class="content"></div></li>
    <li class="slide"><div class="content"></div></li>
    <li class="slide"><div class="content"></div></li>
    <li class="slide"><div class="content"></div></li>
</ul>
<ul id="text" class="slideshow effect-slide">
    <li...

CSS

body {
    background: #171717;
}
.slideshow {
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    z-index: 1;
    list-style: none;
}
.slide {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    display: none;
    text-align: center;
}
.slide:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em;
}
.slide img, .slide .content {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
}
.next, .prev, .current {
    display: block;
}






.slideshow.effect-slide .slide {
    -webkit-transition: -webkit-transform 0.4s;
}
.slideshow.effect-slide .next {
    -webkit-transform: translate3d(100%, 0, 0);
}
.slideshow.effect-slide .prev {
    -webkit-transform: translate3d(-100%, 0, 0);
}
.slideshow.effect-slide .current {
    -webkit-transform: translate3d(0, 0, 0);
}
.slideshow.effect-fade .slide {
    -webkit-transition: opacity 0.4s;
    -webkit-transform:translate3d(0, 0, 0);
}
.slideshow.effect-fade .next {
    opacity: 0;
}
.slideshow.effect-fade .prev {
    opacity: 0;
}
.slideshow.effect-fade .current {
    opacity: 1;
}
.slideshow.effect-stack .slide {
    -webkit-transition: -webkit-transform 0.4s;
    z-index: 0;
}
.slideshow.effect-stack .next {
    -webkit-transform: translate3d(100%, 0, 0);
    z-index: 3;
}
.slideshow.effect-stack .prev {
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 1;
}
.slideshow.effect-stack .current {
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 2;
}




.slideshow {
    display: none;
}
.slideshow.active {
    display: block;
}




.controls {
    text-align: center;
    color: #EEE;
    position: relative;
    z-index: 2;
}
.controls button {
    font-size: 0.75em;
}


#color .content {
    width: 1680px;
    height: 629px;
}
#color .slide:nth-child(5n + 1) .content {
    background-color:...

JavaScript

function Slideshow(slideshowSelector, slideSelector, options) {
    this.slideshow = $(slideshowSelector);
    this.slides = this.slideshow.find(slideSelector);
    this.current;
    this.next;
    this.prev;

    var settings = typeof options !== 'undefined' ? options : {};
    this.loop = typeof settings.loop !== 'undefined' ? settings.loop : false;

    this.setCurrent().setNext().setPrev();
}

Slideshow.prototype.setCurrent = function ($current) {
    if ($current) {
        this.slides.filter('.current').removeClass('current');
        this.current = $current.addClass('current');
    } else {
        $current = this.slides.find('.current');

        if ($current.length > 0) {
            this.current = $current.filter(':first');
        } else {
            this.current = this.slides.filter(':first').addClass('current');
        }
    }

    return this;
};

Slideshow.prototype.setNext = function () {
    if (!this.current) {
        this.setCurrent();
    }

    this.slides.filter('.next').removeClass('next');
    this.next = this.current.next().addClass('next');



    if (this.next.length <= 0) {
        this.next = this.slides.eq(0).addClass('next');
    }

    return this;
};

Slideshow.prototype.setPrev = function () {
    if (!this.current) {
        this.setCurrent();
    }
    this.slides.filter('.prev').removeClass('prev');
    this.prev = this.current.prev().addClass('prev');

    if (this.prev.length <= 0) {
        this.prev = this.slides.eq(this.slides.length - 1).addClass('prev');
    }

    return this;
};

Slideshow.prototype.slideTo = function (index) {
    if (index < this.slides.length) {
        this.setCurrent(this.slides.eq(index)).setNext().setPrev();
    }

    return this;
};

Slideshow.prototype.slideNext = function () {
    var curIndex = this.current.index();

    if (curIndex + 1 >= this.slides.length) {
        if (this.loop) {
            this.slideTo(0);
        }
    } else {
        this.slideTo(curIndex + 1);
    }

   ...