JSFiddle - React, Tailwind, and code Playground

by ZenMaster

HTML

<div class="carousel">
    <div class="window"></div>
    <ul class="slider">
        <li class="item red"></li>  
        <li class="item blue"></li>        
        <li class="item green" style="height: 200px;"></li>
    </ul>
</div>
<div style="clear: both;"></div>
<button class="prev">Prev</button>
<button class="next">Next</button>
<button class="add">Add</button>

CSS

.carousel {
    overflow: hidden;
    width: 302px;
}

.slider {
    position: relative;
    border: 1px solid gray;
}

.item {
    float: left;
    width: 100px;
    height: 100px;
}

.blue{
    background: blue;
}

.red {
    background: red;
}

.green {
    background: green;
}

JavaScript

var slider = $('.slider');

$('.prev').on('click', function() {
    slider.animate({left: '-=100px'});
});

$('.next').on('click', function() {
    slider.animate({left: '+=100px'});
});

$('.carousel').on('swipeleft', function() {
    slider.animate({left: '-=100px'});
});

$('.carousel').on('swiperight', function() {
    slider.animate({left: '+=100px'});
});

$('.add').on('click', function() {
    slider.append('<div class="item red"></div>');
});