Cascading Divs Like Windows jQuery

Hi guys,

I am attempting to scroll through cascaded divs exactly like you can for windows on a PC (I believe a Mac too). I am looking for a jQuery library/plugin that can do this in order to substitute for another library. I'm pretty sure that I have an idea to create the look of it with only divs, but the library I'm using for other effects makes it difficult to combine. I am using Swiper by iDangerous.

If a library/plugin does not exist, and if you have time to look at the link provided, could you steer me in a good direction to incorporate this using Javascript with the Swiper plugin? Basically, I need to make the slides cascade.

Thanks in advance!
deon7388Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Not sure what you are asking for/what the question is.
Are you looking for a simple touch slider like this
http://touchslider.com/
I don't think you get much simpler than this.
0
deon7388Author Commented:
Thanks for the fast reply! Not exactly. You know how you can cascade all open windows on Windows 7 (right-click on taskbar, click 'Cascade Windows')? Well I want to do that with my sliding divs and be able to scroll through them diagonally on the z-axis instead of only horizontally and vertically. It is very difficult to find through my research.
0
GaryCommented:
Understand the stacking part.
So you want to scroll through them so the one at the front moves to the back and so or vice versa?
I do remember seeing a plugin for this, will see if I can find it.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

GaryCommented:
Something like this
http://tympanus.net/Tutorials/PhotoStack/

Click one of the boxes and you will get the photos, then click on the photos.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
deon7388Author Commented:
Getting closer. Based on the second link you gave, take a look at this one: http://www.bkosborne.com/jquery-waterwheel-carousel

Imagine taking the left side of that carousel, and making the pictures move forward instead of in a circle. Same functionality with the clicks, but making them go from left to right and then loop.

And again, thank you so much for helping me. Talking this out is really helping.
0
GaryCommented:
Not sure what you mean by move forward instead of in a circle
You can amend the container so it will not look like they are going in a circle and amend the position.
0
deon7388Author Commented:
Sorry for the confusion. Here's the scenario:

I'm looking to have my divs shown exactly like the left side of the carousel (the cutting board picture, the lake, the trees, and the northern lights).

 --completely ignore the right side--

With that orientation/positioning, when I scroll to the next picture, I want the 1st picture to now become last (looping), and the rest will appear to move diagonally (up and right), but it may be technically to the right.
0
deon7388Author Commented:
Now that I look at the waterwheel more, I may be able to use that as well, unless you have something better for what I'm trying to obtain.
0
GaryCommented:
You can do that just by changing the container width so it cuts off the right side, you won't see some of the slides til they move back around.
0
deon7388Author Commented:
Oh wow, that simple? Great! One more thing (simple to explain this time lol)...are you aware if it's possible to add a touch functionality where I can slide the carousel with the mouse, instead of clicking a button to move it?
0
GaryCommented:
What do you mean slide?
There are simple plugins like
http://a-fung.github.io/jQueryTouch/swipe.html

But you need to click and drag. If you are talking about just swiping the mouse left and right that is not gonna happen - it would trap the mouse in that area
0
deon7388Author Commented:
Thanks, you've been a big help!!!
0
deon7388Author Commented:
These comments allowed me to see what possibilities existed in order to formulate a solution. Also, the expert when above and beyond to provide examples and help.
0
GaryCommented:
Cheers
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.