I'm attempting to construct a carousel using a ul element where the li items act as blocks within the ul container. However, I have encountered difficulties with two different approaches where the overflow property does not behave as expected.
Approach 1:
<ul style="overflow:hidden; width:200px; height:120px; display:block;">
<li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;"> </li>
<li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;"> </li>
<li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;"> </li>
</ul>
The issue with this method is that the elements do not align horizontally when they exceed the bounds of the container (which is the desired outcome). I believe this may be due to the display:block in the li elements, but fixed width/height are required. Is there a workaround for this?
Approach 2:
.ui-carousel
{
display:block;
overflow: hidden;
list-style: none;
}
.ui-carousel-element
{
margin:0;
padding:0;
display:block;
border:2px solid black;
float:left;
}
<ul style="width: 200px; height: 120px; padding-top: 20px;" id="pages" class="ui-widget ui-carousel">
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 0px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 100px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 200px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 300px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 400px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 500px;" class="ui-carousel-element ui-widget-content"> </li>
</ul>
I utilized JavaScript to organize the li elements and position them absolutely, yet the 'overflow:hidden' feature appears to be disregarded as the li items still extend beyond the boundaries of the ul container.
In essence, the question remains - how can I achieve horizontal stacking of fixed-size li blocks within a ul element while hiding any that overflow?