Hello everyone.

I've uploaded a new tutorial this morning about how to create a responsive image slider without scripting, The slider uses CSS keyframes.

I would love to hear your feedback. Thank you

Edited February 11, 201610 yr by Nillervision

Very nice but I'm not a fan of video tutorials for coding. I much prefer to read and see the code but I suspect I'm the minority these days.

Very nice but I'm not a fan of video tutorials for coding. I much prefer to read and see the code but I suspect I'm the minority these days.

Thanks. The code is here:

http://nielsharbo.dk/resources/cis/

Thanks Niller.

Thanks Niller.

You're welcome Precise Formwork Don't hesitate to ask if you have any questions or comments

Edited February 12, 201610 yr by Nillervision

Really awesome....Looks like it is an alternate to a heavy Video

Nice work, You may want to consider doing a follow up video where you work on improving the performance - i.e. animating transforms as opposed to left/right properties, putting the entire slider on it's own composite layer. Paul Irish covers this kind of stuff in great detail and I think would make a nice follow up (Keeping two separate vids so as to not overload newbs with information )

 

I tend to think with these things you:

1. get it working

2. refactor (Both code readability and actual performance)

Edited February 12, 201610 yr by rbrtsmith

Nice work, You may want to consider doing a follow up video where you work on improving the performance - i.e. animating transforms as opposed to left/right properties, putting the entire slider on it's own composite layer. Paul Irish covers this kind of stuff in great detail and I think would make a nice follow up (Keeping two separate vids so as to not overload newbs with information )

 

I tend to think with these things you:

1. get it working

2. refactor (Both code readability and actual performance)

Thanks for the useful feedback Robert. It is much appreciated. I was planing to do a follow up with a slider that responds to clicks/ touch. So I will probably be looking in to your suggestions for optimized performance as well

I agree that it should be in a new video anyway. I think I already squeeze to much information into each video. Because I would like both to explain things in depth for beginners and still have enough substance for more advanced viewers

 

Really awesome....Looks like it is an alternate to a heavy Video

Thank you prateeksha

Edited February 12, 201610 yr by Nillervision

Nice idea, but I would recommend against using an actual <img> to make the slider responsive.

 

Instead there's a neat trick where, if you set each slide to position: absolute and give the wrapper a :before/ :after pseudo element with a padding-bottom/ padding-top whose value is a percentage which resembles the same aspect ratio of the slider images, it scales in exactly the same way. It's a little fiddly getting the right percentage, but it's worth it.

 

You could even go further and add a min-height to the slider so that images don't appear to 'letterbox' when the browser's width is rather small. This would require centering (and therefore cropping) the slides, however, so would require careful consideration in regards to art direction, etc.

 

I realise that's a mouthful, so I whipped up a little CodePen example and you can see it in action here.

 

Also, I was always under the assumption that it was bad practise to use background images for stuff that could otherwise be considered content.

Edited February 16, 201610 yr by jakdothtml

Nice idea, but I would recommend against using an actual <img> to make the slider responsive.

 

Instead there's a neat trick where, if you set each slide to position: absolute and give the wrapper a :before/ :after pseudo element with a padding-bottom/ padding-top whose value is a percentage which resembles the same aspect ratio of the slider images, it scales in exactly the same way. It's a little fiddly getting the right percentage, but it's worth it.

 

You could even go further and add a min-height to the slider so that images don't appear to 'letterbox' when the browser's width is rather small. This would require centering (and therefore cropping) the slides, however, so would require careful consideration in regards to art direction, etc.

 

I realise that's a mouthful, so I whipped up a little CodePen example and you can see it in action here.

 

Also, I was always under the assumption that it was bad practise to use background images for stuff that could otherwise be considered content.

Thanks for your inputs Jack. Some very good points. I used the placeholder image to keep things simple and I actually think it is OK (in terms of performance) because the image will be loaded anyway. But it should probably have an empty alt attribute since it is hidden. Of cause if you want the images indexed by google you would have to use img tags. The reason I'm using background images instead of img elements is because of the overlay texture. When using background elements with the value cover the images will always stretch to cover exactly the same area as the relative parent div even if the aspect ratio is a bit off. When using img tags (which was my first idea) I noticed that sometimes the overlay texture takes up a little more space than the images even when all padding was removed from the parent. If you are not using an overlay img tags works fine though.

EDIT: Brilliant suggestion with the min-height. I will add an annotation to the video with that.

Edited February 18, 201610 yr by Nillervision