Grow your CSS skills. Land your dream job.

jQuery Full Page Slider

  • # May 31, 2011 at 8:49 pm

    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.

    # May 31, 2011 at 8:58 pm

    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.

    # May 31, 2011 at 9:02 pm

    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.

    # May 31, 2011 at 9:05 pm

    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.

    # May 31, 2011 at 9:09 pm

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".