Diagonal SLider

[exsite_interactive]

hello…..??

[noahgelman]

Sorry for being so late. Work has been busy and I’ve also been working on a plugin of my own. I wanted to do it Saturday but work sometimes doesn’t let things be that convenient.

I have it completed. I don’t have FTP access to my site from work so I can’t post it online from here so I’ll post when I get home in like 2 hours.

It should be exactly what you want.

I used Tiny Slider 2 as a base and just adjusted the CSS to match so there might be some extra CSS you dont need, you can just ditch it. I also commented out a little. Tiny Slider uses just javascript so you don’t even need to use jquery so it should load fast.

You can see how I did it. I used a combination of -moz-transform and a little relative positioning. You can change the Skew values to get the angle you want. Just know you’ll have to adjust the relative positioning and image width to match.

Let me know if you need any help in adjusting it to fit your specific design.

There is only one little bug which is on the last slide. Since it’s skewed and there is no slide after the very last one, it shows an empty triangle in the bottom right. You can adjust for that by giving #slider a background image and placing it there so when you’re on the last slide, it’ll be filled in. You can put something fancy, or like a note or ad or something.

I’ll let you know if I come up with something to fix that triangle.

[exsite_interactive]

thanks so much noah. Interested way of approaching it forsure. I would think putting a background image in the #slider div would be fine, or maybe even making it a link saying “view more” which would go to the blog landing page. I would figure something out.

Looking forward to seeing what you came up with, let me know when you get a chance to upload it. You could alternitevely email me.

Let me know. thanks :)

[noahgelman]

Ok, here’s the link

And the link to a zip of the files is here

Let me know how that does

[exsite_interactive]

hey noah, looks really nice. have not checked it out yet in IE but i assume it will just be straight. I had to add the webkit transform skew prefix here to get it to work in safari and chrome.

When i get to the office ill test it out on my PC.

[TheDoc]

Looks great, @noahgelman.

[noahgelman]

@exsite_interactive, Thanks. And yeah, on IE it should just be straight. Also, a note, I did -moz-transform, but I forgot to put in -webkit-transform so you’ll have to toss that in real quick

@TheDoc, Thanks

[buttonpushingmonkey]

Hey @exsite_interactive, @noahgelman – any chance you can refresh the links to examples of this working? Would like to see how it comes together.

Cheers,
BPM

[brennan]

http://www.sequencejs.com/live-themes/split-slide/

achieves a similar result.
theme built off of sequence js

[SWRX]

Hey there,

I’m desperately trying to find a way of doing exactly what Noah (hello Noah :) seems to have achieved but I couldn’t find back any demo files so far.

Would you guys have a version you could update this thread with ?
That would be awesome as it might save me days of work, if not a negative answer to my team.. hhhh
I could find no trace of any demos on codepen..
Wouldn’t any of you know where to start looking ..?

Cheers !

Jh @selectedworx.com

[Author]

Posts