JSFiddle - React, Tailwind, and code Playground

by lucasprus

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec vulputate diam. Nullam vehicula, orci at adipiscing varius, dui mauris consequat ligula, eget pretium metus nisl at purus. In pulvinar felis auctor lacus eleifend consequat. Mauris nibh metus, vestibulum quis vulputate ac, ultricies at nulla. Phasellus tincidunt, arcu ut consequat bibendum, odio mi sagittis mi, non scelerisque risus quam a nisl. Nulla ipsum nisl, lobortis in vestibulum et, porta sed mauris. Integer viverra vulputate dui a dictum.</p>
<button class="left">Left Arrow</button>
<button class="right">Right Arrow</button>
<div id="window">
    <div id="outer-wrapper">
        <div id="wrapper">
            <div id="container">
                <div class="landscape thumbnail"></div>
                <div class="landscape thumbnail"></div>
                <div class="landscape thumbnail"></div>
                <div class="landscape thumbnail wider"></div>
                <div class="landscape thumbnail wider"></div>
                <div class="landscape thumbnail"></div>
                <div class="landscape thumbnail"></div>
                <div class="landscape thumbnail"></div>
                <div class="landscape thumbnail wider"></div>
                <div class="landscape thumbnail"></div>
            </div>
        </div>
    </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec vulputate diam. Nullam vehicula, orci at adipiscing varius, dui mauris consequat ligula, eget pretium metus nisl at purus. In pulvinar felis auctor lacus eleifend consequat. Mauris nibh metus, vestibulum quis vulputate ac, ultricies at nulla. Phasellus tincidunt, arcu ut consequat bibendum, odio mi sagittis mi, non scelerisque risus quam a nisl. Nulla ipsum nisl, lobortis in vestibulum et, porta sed mauris. Integer viverra vulputate dui a dictum.</p>

CSS

/*#window {
    width:200px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}*/
 #outer-wrapper {
    width:2000px;
}
#wrapper {
    display:table;
}
#container {
    position:relative;
    left:0px;
}
div {
    outline:1px solid green;
}
.portrait {
    width:50px;
    height:100px;
}
.landscape {
    height:50px;
    width:100px;
}
.thumbnail {
    float:left;
}
.wider {
    width:200px;
}

JavaScript

$(document).ready(function () {
    var wrapperWidth = parseInt($("#container").parent().css('width'));
    //var tumbnails = $("#container").find('.thumbnail').length;
    var tumbnails = 50;
    //var step = parseInt(wrapperWidth,10) / tumbnails;
    var step = 100;
    //console.log(tumbnails);
    console.log(wrapperWidth);
    console.log(step);



    $(".left").click(function () {
        $("#container").css('left', function (i, value) {
            console.log(-wrapperWidth + 2 * step, parseInt(value, 10) - step);
            //console.log(typeof value);
            return Math.max(-wrapperWidth + 2 * step, parseInt(value, 10) - step);
        });
    });

    $(".right").click(function () {
        $("#container").css('left', function (i, value) {
            //console.log(value);
            //console.log(step);
            //return parseInt(value, 10) + step;
            return Math.min(0, parseInt(value, 10) + step);
        });
    });
});