• 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[i] • 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.
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.
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:
Yes? Winning? I thought it was something original-ish and cool.
'opacity': '0.2'so I can't do something like'background-image': 'url(images/path.png)'. A bit disappointing, but thebodyfade 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.