Diagonal SLider

[exsite_interactive]

Here is a link to a screenshot of a design we have been cooking up here. Is something like this possible with CSS? https://skitch.com/exsite/gy4n8/slider

Want to have this diagonal slider, but still save the images out as rectangles, instead of having to always slice a diagonal mask in the image and save as PNG.

Any help or resources would be much appreciated.

[TheDoc]

Definitely doable – I like the design, too!

Something like this should help, I hope! http://jsfiddle.net/XRqTq/

[exsite_interactive]

@TheDoc, thanks, thats along the lines of where we need to get this.

I played around with it and this is where im at: http://jsfiddle.net/XRqTq/6/ – Its messy… but its getting there. Got the pink overlay on top of a 2nd image, and a 2nd image and headline straight (your example the 2nd image was rotated). The issue here would be getting this to actually become a working slider, and getting it to animate smoothly.

[TheDoc]

Yea, unfortunately my knowledge of jquery is pretty much nil, do I can’t help you much in the regard. I would recommend downloading something like the Anything Slider and see if you can mash up the CSS a bit from there.

[noahgelman]

hmmm…. This is interesting. A slider with a diagonal image cut. Is the whole image clickable to move the slider? or just the arrow? I can take a crack at building this, even make it usable in IE. It could take a couple days due to work being very busy though

[exsite_interactive]

i know right! very interesting, haha. Ideally the whole image would be clickable, but i was thinking that it would be too difficult to do it that way, and i would be happy with just the button as the link.

[exsite_interactive]

if you can take a stab at it that would be much appreciated!! :)

[noahgelman]

Ok, I think I know a way to do this, but in IE, it wont have diagnols, but I should be able to have it fall back to a normal looking slider

[exsite_interactive]

would love to see

[TheDoc]

Atta boy, @noahgelman – thanks for helping out!

[Mottie]

A while back, I was working on an “AnythingSlider Lite” version… I just never got around to finishing it. It lets you set the direction of the slide (change it using the radio buttons), and if you press enter inside of the input box at the top, it will cross-fade to the next slide.

Feel free to use it if you want… someday I may get around to making it an “official” lite version :)

[noahgelman]

I assume you’re cool with using jquery to power it?

[exsite_interactive]

yes, jquery would be preferred.

[cayoub88]

@TheDoc & @exsite_interactive, I like that, but wouldn’t you rather keep the html clean and get rid of that empty div? Maybe use :before or :after ?

[exsite_interactive]

@noahgelman , any luck?

[Author]

Posts