On the hunt for a pure css slider but need some advice

HTML & CSS
15

A table solution with four resizing images could be something like this:

<!doctype html><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<style>
/* distributed edge to edge by table display */
html, body{ margin:0; padding:0}

.footer-thumbs{
    display:table;
    margin:auto;
    padding:0;
    list-style:none;
    background:tan;
}
.footer-thumbs li{
    display:table-cell;
    text-align:center;
}
.footer-thumbs img{
    display:block;
    width:24.8vw;
    width:calc(25vw - 1px);
    height:18.6vw;
    vertical-align:middle;
    background:peru;
}
</style>
</head><body

<div id="footer">
    <ul class="footer-thumbs">
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
    </ul>
</div>

</body></html>

And a forced justify list according to my last post could be like this:

<!doctype html><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<style>
html, body{margin:0; padding:0; background:tan}

.footer-thumbs{
    position:relative; /* referred to by the AP image */
    margin:0;
    border-bottom:30px solid tan; /* demo, hide the soft-wrapped line */
    padding:calc(100vh - 150px) 30px 0; /* demo */
    list-style:none;
    text-align:justify; /* justify key */
    height:120px;
    overflow:hidden;
    word-spacing:.4em; /* helps close the right hand wrapping edge gap, not noticed in this padded demo */
}
.footer-thumbs:after{ /* justify key rule */
    margin-left:99%;
    content:" \a0";
}
.footer-thumbs li{
    display:inline-block; /* justify key */
    width:180px;
    height:120px;
    background:white;
    text-align:center;
}
.footer-thumbs img{
    display:block;
    background:peru;
}
.footer-thumbs li:nth-child(even) img{
    background:gold;
}
.footer-thumbs a:focus img{
    position:absolute;
    right:0;
    bottom:200px;
    left:0;
    margin:auto; /* on AP, it centers between the given positions */
    width:88vw;
    max-width:1000px;
    height:66vw;
    max-height:750px;
}
</style>
</head><body

<div id="footer">
    <ul class="footer-thumbs">
        <li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
        <li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
        <li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
        <li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
        <li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
        <li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
        <li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
        <li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
        <li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
    </ul>
</div>

</body></html>

With an adaptive number of smaller thumbs you don’t need to resize them I think. Better have a responsive large display on user interaction.

See if you can use bits of them, I’ll post a link to a JsFiddler in a while.

Grid images spray all over the place, can I tame them?