JSFiddle - React, Tailwind, and code Playground

by sushant_ceb

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">&rarr;</div>
<div class="left">&larr;</div>

CSS

.wrapper {
    position: relative;
    width: auto;
    height: 50px;
    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:left;
    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'
        });
        }
    });    
});