JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<div id="wrapper">
    <div id="over">
    <ul>
        <li >Text 1</li>
        <li class="select">Text sdfsdf</li>
        <li>Tex</li>            
    </ul>
</div>
    
</div>
<input id="prev" type="button" value="Prev"/>
<input id="next" type="button" value="Next"/>

CSS

#wrapper{
    width:100px;
    border:1px solid red;
}
#over{
    overflow:hidden;
    white-space:nowrap;
    position:relative;
}
#wrapper ul{
    position:relative;
}

#wrapper ul li{
    display:inline;
    list-style:none; 
    border:1px solid pink;
}
#wrapper ul li.select{
    font-weight:bold;
    border:1px solid green;
}

JavaScript

var extraSize = 80;
var listSize = 0 ;
var displaySize = parseInt($("#wrapper").css("width").split("px"));
var cur_pos = 0;
var totalItem = $("ul").children().size();


console.log("Total item:- " + totalItem);
$("li").each(function(){
    listSize+=parseInt(($(this).css("width")).split("px"));
});
var listSize = 0;
$("li").each(function(){
    if(listSize < (displaySize-extraSize)){
        cur_pos+=1;
    }
    listSize+=parseInt(($(this).css("width")).split("px"));
});
console.log("Item on display:- " + cur_pos);

if(listSize > displaySize)
{
    var difference = listSize - displaySize;
}


$("#next").on("click",function(){
    if(cur_pos < totalItem){
        $("ul").animate({
            
            "right" : $("ul li.select").css("width"),
            //"width" : $("ul").css("width", parseInt(($(this).css("width")).split("px")) + parseInt(($("ul li.select").css("width")).split("px")) + "px")
        });
//        $("ul").css("left",$("ul li.select").css("width"));
        cur_pos+=1;
        console.log("Current Position:- "+cur_pos);
      
    }
});
$("#prev").on("click",function(){
    if(cur_pos >= totalItem){
        $("ul").animate({
            "left" : $("ul li.select").css("width"),
            "width" : $("ul").css("width", parseInt(($(this).css("width")).split("px")) + parseInt(($("ul li.select").css("width")).split("px")) + "px")
        });
//        $("ul").css("left",$("ul li.select").css("width"));
        cur_pos-=1;
        console.log("Current Postion:-  "+cur_pos);
    }
});