Grow your CSS skills. Land your dream job.

Fullpage image slider using responsive grid

  • # October 11, 2012 at 11:33 am

    Hi all! I am using 996grid.com to build my site, which is a responsive grid. I am trying to include a fullscreen image slider on the homepage, but am having a hard time. I realize I have to put the slider outside of the container to achieve 100% width. My problem is that having the slider position:relative, this is pushing my container out of place. Does anyone have any advice, or examples, as to if this can be done?

    # October 11, 2012 at 11:36 am

    Do you have a link to a live site?

    I’m not sure why you are positioning the slider at all.

    http://codepen.io/anon/pen/neidF

    # October 11, 2012 at 11:55 am

    Thanks, unfortunately this site isn’t live. That’s an interesting solution you have, but my goal is to only have 1 container, and have that be on top of the image slider (ie: container –> z-index: 1; slider: z-index:2). That way the content in the container will be visible and the slider is sliding images in the background.

    # October 11, 2012 at 12:06 pm

    It’s either inside the container or it isn’t.

    If it is then you’re stuck with 996px.

    # October 11, 2012 at 12:32 pm

    I understand that. The slider is outside of the container. The problem is that both the slider and the container have “position: relative;.” In order for the full background to work, one has to be absolute.

    # October 11, 2012 at 1:02 pm

    Why do they have position relative?

    # October 11, 2012 at 1:17 pm

    I’m not sure…. should i get rid of that? Then have the container be relative and the images in the slider be absolute?

    # October 11, 2012 at 6:09 pm

    I found a solution: http://srobbin.com/jquery-plugins/backstretch/

    amazing little plugin, thanks for the help!

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

You must be logged in to reply to this topic.

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