JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<img class="grupa_slider" src="http://www.cheap-it.com/images/Dell%20XPS%20Small.jpg" width="100" height="100">
        <img class="grupa_slider" src="http://images.apple.com/support/_images/icon_imac_g5.jpg" width="100" height="100">
        <img class="grupa_slider" src="http://img.dooyoo.co.uk/GB_EN/100/computer/pc-desktops/apple-imac-mb950b-a.jpg" width="100" height="100">
        <img class="grupa_slider" src="http://i2.expansys.com/img/n/224028/apple-ipod-touch-4th-generation-white.jpg" width="100" height="100">
        <img class="grupa_slider" src="http://www.staticwhich.co.uk/media/images/thumbnail/ipod-nano-185796.jpg" width="100" height="100">
        
        <div id="slider"></div>
        
        <input type="button" value="next" />

CSS

body { background: url("http://webdesignledger.com/wp-content/uploads/2009/02/patterns_2.jpg") }
 
.slide-wrap { position: relative; }
        
.slide-wrap .no-edge,
.slide-wrap .left-edge,
.slide-wrap .right-edge { position: absolute; top: 0; left; 0; }

JavaScript

var Page = {};
    
Page.SetupSlider = function SetupSlider() {
    
    var imgCollection = $(".grupa_slider"),
        container = $("#slider"),
        settings = {
            speed: 200,
            display: 3,
            transparencyQuality: 100
        },
        slideTemp,
        imgPos,
        imgUrl,
        imgWidth = $(imgCollection[0]).width(),
        imgHeight = $(imgCollection[0]).height(),
        opacity;
    
    container
        .css({
            "position": "relative",
            "overflow": "hidden",
            "width": settings.display * imgWidth,
            "height": imgHeight
        });
    
    for (var i = 0, l = imgCollection.length; i < l; i++) {
        
        slideTpl = "<div class=\"slide-wrap slide_" + i + "\" style=\"float: left;\">" +
                        "<div class=\"no-edge\" style=\"float: left;\" />" +
                        "<div class=\"left-edge\" style=\"float: left;\" />" +
                        "<div class=\"right-edge\" style=\"float: left;\" />" +
                    "</div>";
        
        container
            .append(slideTpl);
        
        opacity = 0;
        
        for (var m = 0, n = settings.transparencyQuality; m < n; m++) {

            imgPos = m * imgWidth / settings.transparencyQuality;
            
            $(".slide_" + i + " .no-edge")
                .append("<div style=\"float: left; " +
                              "width: " + imgWidth / settings.transparencyQuality + "px; " +
                              "height: " + imgHeight + "px; " +
                              "background: url(" + $(imgCollection[i]).attr("src") + ") -" + imgPos + "px 0px no-repeat;\" />");
            
        }

        for (var m = 0, n = settings.transparencyQuality; m < n; m++) {

            imgPos = m * imgWidth / settings.transparencyQuality;
        
            opacity = m * 0.01;
            
            $(".slide_" + i + " .left-edge")
                .append("<div rel=\"" +...