JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<button class="nav" id="left"><</button>
<div class="slider">
    <ul class="slider-inner">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
</div>
<button class="nav" id="right">></button>

CSS

.slider {
    margin: 0;
    overflow: hidden;
    position: relative;
    float: left;
    width: 100px;
    height: 200px;
}   
.slider-inner {
    left: 0;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
}  
ul {
    list-style: none;
}
li {
    padding: 0;
    margin: 0;
    float: left;
    width: 100px;
    height: 100px;
    background: #eee;
    border: 1px solid orange;
    box-sizing: border-box;
}
button.nav {
    float: left;
    cursor: pointer;
    background: none;
    border: 2px solid grey;
    padding: 2px;
    font-size: 18px;
    width: 100px;
    height: 100px;
    opacity: .5;
    background: #fff;
    z-index:9999;
}


@media (max-width: 400px) {   
    .slider {
        width: 180px;
    }
    .slider-inner li {
        width: 60px;
    }
}

JavaScript

//$(window).resize(setSliderWidth);


// var setSliderWidth == function () {

//}

var visibleItemCount = 1,
    slider = $('.slider-inner'),
    itemW = slider.find('li:first').outerWidth(),
    itemTW = parseInt(itemW * slider.find('li').length);

    slider.css('width', itemTW + 'px');

$('button').click(function() {
    
    var left = (this.id == 'right') ? parseInt(slider.css('left').toString().replace('-', '')) : parseInt(slider.css('left'));
    var side = (this.id == 'right') ? (((left + (itemW * visibleItemCount)) == itemTW) ? 0 : -(left + itemW)) : ((left < 0) ? -(parseInt(left.toString().replace('-', '')) - itemW) : 0);
    rotate(side);
    return false;
});
    
var rotate = function(leftY) {
    slider.stop(true, true).animate({
        left : leftY
    }, 500);
}