Hi from totally sunny & warm York UK 
http://codepen.io/Pingbat/pen/xbBQqE
In a site I’m building (above codepen) I’m wanting to add an image slider in the footer but being a bit of a noob I have limited skills and dont want to mess with Jquery, i’d like it pure CSS. Now I cam across this below:
Would this be a sensible template to work with if my requirement is to add an image slider in the footer of the wedding site?
Any advice welcome 
Your idea sounds great. Now, when you like it pure CSS, why not make one using pure css. It’s an oppertunity to learn what you can achive without relying on javascript.
If I came visiting with a wedding in mind, certainly a row of thumbnails with interesting related stuff would make me stay longer and maybe more open for bussiness.
But an animated slider wouldn’t add anything, though the thumbnail row beneith the slide is a very good display I think. I would like the view images be large enough to have the expected information and I definitly wouldn’t like the image I look at to slide away.
Make a scriptless CSS version, keep it simple. It’s not that hard for a new developer when he has come to the right place asking for advice.
My first thought suggestion is to have the row of thumbs, but without the slider. Rather do like you already do with the other images, show the large image of choice on interaction. Even better, let the image pop up to view in front of everyting on a mouse click (click a thumb to view). Thats easy. The hard pard is to not overdo it.
Oops, afk before posting.
Quizical, You hit the nail imho!
EDIT) Sort of.
Thank you for uploading this and vi cope pen, extra helpfull
Yes it is a concern i have too and sometimes more is less. I’m going to run with the idea of just a row of thumbs that pop on click. I’ll update progres back here, i just hope what I do ticks the resposive box. I have to admit images and resposivness confuses me a little.
Am i right in saying a should use percentages of image sizes and that should make the images adapt to different sized viewports?
Responsive images is not quite that simple as you should take in to consideration bandwidth and also pixel density of the screen. There is no point in sending a larger high quality image to someone on a slow connection and with a low quality screen. These two articles might help http://www.sitepoint.com/improving-responsive-images-picture-element/
Ok Ive gone for just a v simple 4 images in the footer ( I need 4 to spaces for future ads).
Here is where i am at now:
http://codepen.io/Pingbat/pen/xbBQqE
But because I dont how to make the images responsive I get this:
So i guess my question is - "How can i always get four images to line up horizontally whatever the view port size and how can i get rid of that grey spill over on the footer?
Thanks in advance,
David
You could try displaying the images as table-cell, and their container displayed as table.
footer { display: table; }
footer img { display: table-cell; }
Or maybe Flexbox with no-wrap?
Thanks SamA74
May I ask, if I go dont the cell route will the images behave responsively?
They can do if set up to be. That needs a bit more css than I put above, that’s just a starting point. You will need to set widths for the container and images. I can’t tell you the exact setup off the top of my head without trying it, but sure it’s possible.
Something along these lines
footer {
width: 100%;
background: #ddd;
display: table;
}
footer span {
display: table-cell;
width: 25%;
vertical-align: middle;
padding: 0;
}
footer span img {
display: block;
width: 90%;
margin: 6px auto;
}
David,
Give this demo a try. It is a working example of @SamA74s method with a small enhancement. (@SamA74s choice of elements would probably be more appropriate than mine.)
If you still prefer to go the non-table-cell route, let us know how you wish to do that and we can offer suggestions.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table tester images in a row</title>
<!--
http://www.sitepoint.com/community/t/on-the-hunt-for-a-pure-css-slider-but-need-some-advice/192620/11
-->
<style type="text/css">
html {
box-sizing:border-box;
}
*, *::before, *::after {
box-sizing:inherit;
}
.outer {
width:96%;
max-width:1200px;
margin:0 auto;
border:2px dashed black; /* DEMO TEST Border set to show outer container width (page width?). May Be DELETED */
}
.twrap {
margin:0 -.8%; /* set negative left & right margin by trial and error to pull outer images to page edge. */
margin-top:16px; /* vertically separates tables for this DEMO Only. To Be DELETED. */
}
.table {
display:table;
table-layout:fixed;
width:100%; /* required */
}
.tcell {
display:table-cell;
outline:1px solid lime; /* TEST Outline. To Be DELETED */
}
img {
display:block;
width:94%;
height:auto;
margin:0 auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="table">
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
</div>
<div class="twrap">
<div class="table">
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
</div>
</div>
</div>
</body>
</html>
Cheers
That’s an old trick, forcing justify with an additional element was first mentiond here, autumn 2008 iirc.
Sorry, again I can’t see your explaining images, next time can you please put your explainings somewhere easy accessible, not on a scripted-datamining-nonopen image service.
Why stop at four if there is room for more on a wide screen? Responsive size? they would become too large as thumbs on a wide screen and too small on narrow screens. With a forced justify method you can fill the row with thumbnails dependent on the viewport width, no need to resize or adapt. Hopefully you want to display a larger image on user interaction (and still wanting a pure css solution). With large images on mouseclick the thumbs only need to be interesting, not detailed, and if more than four the thumbs can be a little smaller, same size in different numbers.
I think I can toss up something of that kind if you like later on.
OT/ Thanks Discourse, my damnice browser just gave up and you saved my edit, Thanks!
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.
Eric, why set the images width to 24.8vw? Why not just give the table width:100%; to stretch the screen and table-layout:fixed; to equally distribute, and call it a day? Might be missing something here, so I apologize if that’s the case. You’d negate cross-browser compatibility issues that vw/vh has by doing this.
Hi Ryan, I’m aware, thanks for the alert.
Making demos without real images has its quirks.
The table: http://jsfiddle.net/Erik_J/kavrab86/
The list: http://jsfiddle.net/Erik_J/08sutbme/
Those are saved as base versions.
Please edit the fiddles to your like and update. Post the updated URLs here, the base versions won’t change.
I took your advice, here is a test version for putting in real no fake images.
EDIT/ Saw some more to fix.
<!doctype html><html lang="en"><head><meta charset="utf-8">
<title>Forced Justified Items</title>
<style>
html, body{ margin:0; padding:0}
.footer-thumbs{
display:table;
table-layout:fixed;
margin:0;
padding:0;
width:100%;
list-style:none;
}
.footer-thumbs li{
display:table-cell;
text-align:center;
}
.footer-thumbs img{
display:block;
margin:0 -2px; /* fit the oversizing without scroll */
border:1px solid white;
width:100%; /* dynamically adapt image size to the cell */
height:auto; /* a real image has intrinsic lengths giving a height proportional to the percent width */
}
</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>
I was just wondering why you didn’t do it; or perhaps overlooked. I’m 100% sure you already know about it. Was just curious whether I overlooked some requirement by the OP . Thanks for putting it in. Definitely looks more “older-browser” friendly.
I’m on chromebook right now, so I can’t test manually, but you fixed the other stuff, right? I know you don’t need help but if you’re out of time, I can do a few fixes if you have to run .
Thanks Ryan, please do.