JSFiddle - React, Tailwind, and code Playground

by karim79

HTML

<div id="slideshow">
    <ul id="carousel">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>

</div>

<button id="next">Next</button>
<button id="prev">Prev</button>

CSS

#slideshow {
    position: relative;
    overflow:hidden;
    width: 400px;
    height: 400px;
    background-color: yellow;       
    
}
ul {
    list-style-type:none;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 1200px;        
    white-space: nowrap;   
}

li {
    float: right;
    text-align: center;
    width: 400px;
    height: 400px;    
}

JavaScript

$("#next").click(function() {

    $("ul").animate({

        marginLeft: "-=400px"


    }, 500);
});

$("#prev").click(function() {

    $("ul").animate({

        marginLeft: "+=400px"


    }, 500);
});