Css only carousel dynamic width

Carousels are common features in pages and apps we use every day. As frontend developers we need to build them efficiently and to work across a range of devices and browsers. if we can do it without Javascript then even better!

The main features of a carousel are:
- multiple items in a list
- list has hidden content which can be scrolled into view
- items are the width of the carousel view or are the width of their own content
- we can have links to show each item in the view
- the carousel should work cross device and browser
- touch or mouse operated

So lets start with some simple html:

<div class="carousel">
    <ul>
        <li>
            <img src="image.jpg" />
            <span>Text</span>
        </li>
        <li>
            <img src="image.jpg" />
            <span>Text</span>
        </li>
        <li>
            <img src="image.jpg" />
            <span>Text</span>
        </li>
    </ul>
</div>

and some css to make the items flow using their content size, so multiple items are seen at the same time:

.carousel {
    overflow: auto;
    padding: 10px;
}

.carousel ul {
    display: table;
    table-layout: fixed;
}

.carousel li {
    display: table-cell;
    vertical-align: top;
    padding: 0 10px 0 0;
}

or alternatively if you would like to size the carousel items to fit the view, so only one is visible at one time:

.carousel {
    overflow: auto;
    padding: 10px;
}

.carousel ul {
    white-space: nowrap;
}

.carousel li {
    width: 100%;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}

.carousel img {
    float: left;
}

.carousel span {
    clear: left;
    float: left;
}

This is a great solution that works down to IE8 and Firefox 3.6. If you would like to support IE7 you should float the items rather than using display inline-block.

Also we would like to add links to jump to certain slides within the content area. This is also achievable without JavaScript, we can use anchor tags. Here is an example of paging/item navigation html:

<div>
    <ul>
        <li><a href="#item1">Item 1</a></li>
        <li><a href="#item2">Item 2</a></li>
        <li><a href="#item3">Item 3</a></li>
    </ul>
</div>

and we also need to update our carousel html to have id's when the anchor tags point to:

<div class="carousel">
    <ul>
        <li id="item1">
            <img src="image.jpg" />
            <span>Text</span>
        </li>
        <li id="item2">
            <img src="image.jpg" />
            <span>Text</span>
        </li>
        <li id="item3">
            <img src="image.jpg" />
            <span>Text</span>
        </li>
    </ul>
</div>

Now when you click the nav items the browser will try to show the item in the scroll area, vertically and horizontally. This works really well except for when the content is already slightly in view. One way to improve the experience is to show the user which slide they have selected is to use the target class:

:target { outline: solid red }

You can see a full working example of it here:
http://jsfiddle.net/kmturley/6yp6Q/5/

Updated example with CSS3 animations:
http://jsfiddle.net/kmturley/fs6wge3f/1/