JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<nav class="slider-nav"> <a href="#slide-0" class="active">Slide 0</a>  <a href="#slide-1">Slide 1</a>  <a href="#slide-2">Slide 2</a> 
</nav>
<input id="add" type="button" value="Click to upload"></input>
<div class="slider-wrap">
    <div class="slider" id="slider">
        <div class="holder">
            <div class="image-holder"></div>
            <div class="slide" id="slide-0"></div>
            <div class="slide" id="slide-1"></div>
            <div class="slide" id="slide-2"></div>
        </div>
    </div>
</div>

CSS

#add {
    width:300px;
    display:block;
    margin:0 auto;
}
.image-holder img {
    width: 300px;
}
.slider-wrap {
    width: 300px;
    height: 500px;
    margin: 20px auto;
}
.slider {
    overflow-x: hidden;
}
.holder {
    width: 300%;
}
.slide {
    float:left;
    width: 300px;
    height: 500px;
    position: relative;
    background-position: -100px 0;
}
.temp {
    position: absolute;
    color: white;
    font-size: 100px;
    bottom: 15px;
    left: 15px;
    font-family:'Josefin Slab', serif;
    font-weight: 100;
}
#slide-0 {
    background-image: url(http://i158.photobucket.com/albums/t106/OnlyObvious/misc/andromeda_galaxy_large.jpg);
    width: 300px;
    height: 768px;
}
#slide-1 {
    background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
    background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}
.slide:before {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(transparent, black);
}
.slider-nav {
    text-align: center;
    margin: 10px 0 0 0;
}
.slider-nav a {
    width: 10px;
    height: 10px;
    display: inline-block;
    background: #ddd;
    overflow: hidden;
    text-indent: -9999px;
    border-radius: 50%;
}
.slider-nav a.active {
    background: #999;
}

JavaScript

$('#slide-1').data('offset-top', $('#slide-1').offset().top);
$('#add').click(function () {
    $('div.image-holder').html('<img src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /> ');
    $('#slide-1, #slide-2').offset({
        top: $('#slide-1').data('offset-top')
    });
});

var slider = {

    // Not sure if keeping element collections like this
    // together is useful or not.
    el: {
        slider: $("#slider"),
        allSlides: $(".slide"),
        sliderNav: $(".slider-nav"),
        allNavButtons: $(".slider-nav > a")
    },

    timing: 800,
    slideWidth: 300, // could measure this

    // In this simple example, might just move the
    // binding here to the init function
    init: function () {
        this.bindUIEvents();
    },

    bindUIEvents: function () {
        // You can either manually scroll...
        this.el.slider.on("scroll", function (event) {
            slider.moveSlidePosition(event);
        });
        // ... or click a thing
        this.el.sliderNav.on("click", "a", function (event) {
            slider.handleNavClick(event, this);
        });
        // What would be cool is if it had touch
        // events where you could swipe but it
        // also kinda snapped into place.
    },

    moveSlidePosition: function (event) {
        // Magic Numbers =(
        this.el.allSlides.css({
            "background-position": $(event.target).scrollLeft() / 6 - 100 + "px 0"
        });
    },

    handleNavClick: function (event, el) {
        event.preventDefault();
        var position = $(el).attr("href").split("-").pop();

        this.el.slider.animate({
            scrollLeft: position * this.slideWidth
        }, this.timing);

        this.changeActiveNav(el);
    },

    changeActiveNav: function (el) {
        this.el.allNavButtons.removeClass("active");
        $(el).addClass("active");
    }

};

slider.init();

// http://codepen.io/BaylorRae/pen/ImGBC
// Originally added click links, so I...