JSFiddle - React, Tailwind, and code Playground

by agconti

HTML

<div class="wrapper">
    <div class="container">
        <div class="contentContainer red"></div>
        <div class="contentContainer blue"></div>
        <div class="contentContainer orange"></div>
        <div class="contentContainer green"></div>
        <div class="contentContainer black"></div>
        <div class="contentContainer grey"></div>
        <div class="contentContainer red"></div>
        <div class="contentContainer blue"></div>
        <div class="contentContainer orange"></div>
        <div class="contentContainer green"></div>
        <div class="contentContainer black"></div>
        <div class="contentContainer grey"></div>
        <div class="contentContainer red"></div>
        <div class="contentContainer blue"></div>
        <div class="contentContainer orange"></div>
        <div class="contentContainer green"></div>
        <div class="contentContainer black"></div>
        <div class="contentContainer grey"></div>
    </div>
</div>

<div class="right"><img src="http://www.csulb.och101.com/shared/images/yahoo_arrow.png" width='20px' height='20px' /></div>
<div class="left"><img src="http://www.csulb.och101.com/shared/images/yahoo_arrow.png" width='20px' height='20px' /></div>

CSS

.wrapper {
    position: relative;
    width: auto;
    height: 200px;
    top: 0;
    left: 0;
    overflow: hidden;
}
.container {
    position: absolute;
    height: 200px;
}
.contentContainer {
    width: 182px;
    height: 200px;
    display: inline-block;
}
.red {
    background-color: red;
}
.blue {
    background-color: blue;
}
.orange {
    background-color: orange;
}

.green {
    background-color: green;
}
.black {
    background-color: black;
}
.grey {
    background-color: grey;
}

.left {
    float:right;
    position:relative;
    bottom:5px;
    transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
    cursor: pointer;
}
.right {
    float:right;
    cursor: pointer;
}

JavaScript

$(document).ready(function () {
    $('.right').click(function () {
        var position = $('.container').position();
        var r=position.left-$(window).width()
        $('.container').animate({
            'left': ''+r+'px'
        });
    });    
    
    $('.left').click(function () {
        var position = $('.container').position();
        var l=position.left+$(window).width()
        if(l<=0)
        {
        $('.container').animate({
            'left': ''+l+'px'
        });
        }
    });    
});





//Here we are getting the number of the divs with class contentContainer inside the div container
var length = $('div .container').children('div .contentContainer').length;
//Here we are setting the % width depending on the number of the child divs
$(".container").width(length*100 +'%');