@CrocoDillon, adding transitions to that pen i made seems to be a little more complex than i thought. I went down the whole "z-index" route and we all know that's just digging a whole. I like your slider, still don't know how mine got featured?? lol, anywho, have you tried making your's full screen?
@Merri, thanks! I didn't think of that because normally CSS alows 0 values without unit. I wrote this code a few months ago, when I didn't know non-prefixed properties should be last yet. I was just too lazy to fix that but I'll do it straight away! :) It's just a proof-of-concept or something like that, nothing I'd use in production.
@JohnMotylJr, the most complex part was calculating the offsets. I've tried fullscreen, why?
@CrocoDillon, Well.. {{ DISCLAIMER:: Do not laugh at my super quick drawings }} lets say we use your method as a full screen image slider (NO-JAVASCRIPT), would we still be able to use it's functionality with full window images?
From what i gathered about your slider, is it has a container that has a hidden overflow and you just push and pull the images into place?
Now if we were to attempt it with a full width && height slider, it would essentially work the same? Might have to adjust the images to fill it's parent container? Sorry, doing about 8 diff things at once while writing this post.
You're right about how it works, but I don't see why this couldn't work in fullscreen... maybe... maybe I'll try tomorrow, I need sleep now. That said I didn't make the slider to be fullscreen anyway, I made it a while ago just for the heck of it.
(My first guess is, haven't tried though, that for example for 5 images you'd need to set the width to 20% instead of 100%)
After @JohnMotylJr got featured with his CSS only slider, this is a blatant attempt to get mine featured too :P (feel free to hate)
http://cdpn.io/hmgcz
What do you think?
I'll just say "test it on Firefox" and you'll see a problem :)
Yeah I know -_- life sucks...
It is quite simple mistake you have, transition lines last value should be
0sand not0. Don't know why Chrome allows 0 there.As a related feedback vendor prefixed styles should be before non-prefixed.
Other than that I'd say it is very nice. The only complaint I have is that it isn't nice to use if there are no transitions.
@CrocoDillon, adding transitions to that pen i made seems to be a little more complex than i thought. I went down the whole "z-index" route and we all know that's just digging a whole. I like your slider, still don't know how mine got featured?? lol, anywho, have you tried making your's full screen?
@Merri, thanks! I didn't think of that because normally CSS alows 0 values without unit. I wrote this code a few months ago, when I didn't know non-prefixed properties should be last yet. I was just too lazy to fix that but I'll do it straight away! :) It's just a proof-of-concept or something like that, nothing I'd use in production.
@JohnMotylJr, the most complex part was calculating the offsets. I've tried fullscreen, why?
@CrocoDillon, Well.. {{ DISCLAIMER:: Do not laugh at my super quick drawings }} lets say we use your method as a full screen image slider (NO-JAVASCRIPT), would we still be able to use it's functionality with full window images?
From what i gathered about your slider, is it has a container that has a hidden overflow and you just push and pull the images into place?
Now if we were to attempt it with a full width && height slider, it would essentially work the same? Might have to adjust the images to fill it's parent container? Sorry, doing about 8 diff things at once while writing this post.
Awesome drawings! (disclaimer didn't work)
You're right about how it works, but I don't see why this couldn't work in fullscreen... maybe... maybe I'll try tomorrow, I need sleep now. That said I didn't make the slider to be fullscreen anyway, I made it a while ago just for the heck of it.
(My first guess is, haven't tried though, that for example for 5 images you'd need to set the width to 20% instead of 100%)