jQuery Full Page Slider

[Roxon]

Hello design beasts,

I thought I would share my latest experiment (originally posted on Forrst).

Part 1: The Design
Part 2: The Code
Part 3: The Demo!

Design Snap:

Code Description:

92 lines of pure awesome, in my opinion.

What it needs:

• Two right and left buttons
• Container (div, span, etc) with an ID corresponding to the slide name
• Background image (images/id.jpg) that has a name that corresponds to the ID name

What it does:

• Positions the buttons perfectly vertically centered and up against either side of the page horizontally and adds/subtracts the value of padding so the buttons are symmetrical
• When the window is resized calls the positioning function again
• Cycles the slides
• Shows the next or previous slide by hiding slides[i-1] or slides[i+1] and showing slides
• Uses .css() to change the body background to images/#id#.jpg
• Comes ready for new slides to be added into the slides array

Yes? Winning? I thought it was something original-ish and cool.

[Jeager]

Its nice, but not quite a slider? Its more of a fader. I haven’t checked the code but just using a css switcher with a fade transition is what this is doing? To see the entire page slide to the next was what I was expecting.

[Roxon]

Yeah, it’s kind of tough – I’m not sure how to make it slide. The .animate() function only accepts numeric CSS values, for instance 'opacity': '0.2' so I can’t do something like 'background-image': 'url(images/path.png)'. A bit disappointing, but the body fade gets the job done. If you have a suggestion on how to get it done, I would be more than happy to try it.

[Jeager]

I usually just steal jquery, but I knew there was a ‘slide’ option in dreamweaver as a javascript snippet. Maybe you can find something along that line. Not sure though, also, are you using a ‘ease’ with the transition?

Edit: how about changing the position of the page? Say on a click it changes to another css -2000px(the size of the bg) or say margin-right: -100%, with a transition?

Edit 2: Say if the entire content was wraped, and you have 3 different wrappers, one for each page, and the the arrows would either -100% left or right, however you could work that out to be, along with the backgrounds being in a div, wrather then a background? Im just throwing some ideas out, take what ya need.

[Roxon]

Those solutions seem a bit hacky to me, but I may give them a try locally. Thanks man. ;)

[Author]

Posts