I'm currently working on a unique project involving floating divs that I would like to spin endlessly in a horizontal line without wrapping. These divs must remain within a specific width container, and my goal is to implement left and right buttons to scroll through the items instead of using a scrollbar.
However, I'm facing an issue where the divs wrap around once they reach the end of the parent container. Is there a way to prevent this wrapping behavior? Once I solve that, my next step is to use jQuery to enable horizontal movement when the user clicks on the left or right arrows.
You can find the code and view the fiddle I've created below:
HTML:
<div id='container'>
<div id='arrowL'>
</div>
<div id='arrowR'>
</div>
<div class='list'>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
</div>
CSS:
#container{
width:340px;
height:50px;
}
.list{
background:grey;
width:300px;
height:50px;
float:left;
}
#arrowR{
background:yellow;
width:20px;
height:50px;
float:right;
}
#arrowL{
background:yellow;
width:20px;
height:50px;
float:left;
}
.item{
background:green;
width:140px;
height:40px;
margin:5px;
float:left;
}
Any assistance or advice on how to achieve this functionality would be greatly appreciated. Thank you!