JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<div id="container">
    <div class="slider_container">
        <div class="slider_thumb_container">
        </div>
        <div class="slider_content">
            <div class="slider_overlay">
            </div>
        </div>
    </div>
</div>

CSS

.slider_container{
    width : 1000px;
    height : 350px;
    clear : both;
    border : 2px double black;
    overflow : hidden;
    position : relative;
    background : #000;
}

.slider_container .slider_thumb_container{
    float : left;
}
.slider_container .slider_thumb_container .thumb{
    width : 100px;
    height : 60px;
    border : 5px solid transparent;
    display : block;
    cursor : pointer;
    -webkit-user-select : none;
    -moz-user-select : none;
    -o-user-select : none;
    -ms-user-select : none;
    -khtml-user-select : none;
    user-select : none;
}
.slider_container .slider_thumb_container .thumb.selected{
    border-color : yellow;
}

.slider_container .slider_content{
    float: right;
    width: 885px;
    height: 350px;
    overflow: hidden;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
}

.slider_container .slider_content .slider_overlay{
    float : right;
    width : 250px;
    height : 100%;
    background-color : rgba(10,10,10,0.3);
    color : #fff;
}

JavaScript

$.fn.slidify = function(options){
    var o = $.extend({},options,$.fn.slidify.defaults);
    var thumbTemplate = $('<img />').addClass('thumb');
    return this.each(function(i,el){
        var slider_thumb_container = $('.slider_thumb_container',el),
            slider_content = $('.slider_content',el),
            slider_overlay = $('.slider_overlay',el);
        
        $.each(o.slides,function(j,s){
            thumbTemplate
                .clone()
                .click(function(e){
                   go_to_nth_slider(j);
                })
                .attr('src',s.thumb)
                .data('slide',s)
                .appendTo(slider_thumb_container);
        });
        var thumbs = $('.thumb',slider_thumb_container);
        console.log(slider_thumb_container ,slider_content,slider_overlay,thumbs   );
        window.go_to_nth_slider = function (i){
            thumbs.removeClass('selected');
            var el =  thumbs.eq(i%thumbs.length).addClass('selected'),
                s = el.data('slide');
            console.log(el,s);
            slider_overlay.html(s.html);
            slider_content.css('background-image','url('+s.image+')');
        };
        go_to_nth_slider(0);
        if(o.autoplay)
            {
                var t = typeof o.time !== 'number' ? 1000 : o.time;
                setInterval(function(){
                    var i = (thumbs.filter('.selected').index() || 0)+1;
                    console.log(i);
                    go_to_nth_slider(i);
                },t);
            }
        console.log(o);
    });
}
$.fn.slidify.defaults = {};

$(document).ready(function(){
    var options = {
        autoplay : false,
        time : 2000,
        slides : [
            {
                thumb : 'http://kurrik.github.com/hackathons/static/img/sample-128.png',
                image : 'http://unbridaledaustin.files.wordpress.com/2011/09/sample-sale-jpeg.jpg',
                 html : '<h2>"Lorem ipsum dolor sit...