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?
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.
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.
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?
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
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.
It's either inside the container or it isn't.
If it is then you're stuck with 996px.
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.
Why do they have position relative?
I'm not sure.... should i get rid of that? Then have the container be relative and the images in the slider be absolute?
I found a solution: http://srobbin.com/jquery-plugins/backstretch/
amazing little plugin, thanks for the help!