• 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.
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.
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.
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.