Menu icon Foundation
Slider height = browser height

I'm really stuck here.
I'm a noob at programming, so i can't figure out this by myself.

My slider is similar to the slider on this site: http://goodevening.no/
Only thing is, that my slider has the height of the picture within. So i have to scroll down till the end of the slider and after that to the content.
What i want to achieve is that the container of the slider sticks to the browser-window size like it is on the website earlier mentioned.
Please help. I have no clue, how to get there.

I'm using Foundation 5 just to be clear.

Orbitsliderfull heightfull screen

I'm really stuck here.
I'm a noob at programming, so i can't figure out this by myself.

My slider is similar to the slider on this site: http://goodevening.no/
Only thing is, that my slider has the height of the picture within. So i have to scroll down till the end of the slider and after that to the content.
What i want to achieve is that the container of the slider sticks to the browser-window size like it is on the website earlier mentioned.
Please help. I have no clue, how to get there.

I'm using Foundation 5 just to be clear.

Zeth Oats almost 6 years ago

Hey There! Here is solution for you issue. Check out http://codepen.io/avclark/pen/jzsdv for some handy-dandy code examples.

Web Toaster almost 6 years ago

Oh thanks, but i can´t compare to my project. I don't use sass. So could you tell me how the css would look like?

And i need the slider-caption class out of the caption-slider-container.
The orbit-class has the preview-button the next-button and the orbit-bullets after the orbit-slider-container. But the caption-container is inside. How do i get it out of there?

Steve Trask over 5 years ago

Hey

You can just click on (sass) and it compiles in codepen also below
```CSS

.orbit-container {
width: 100%;
height: 100%;
}

.orbit-slides-container {
width: 100%;
height: 100% !important;
}
.orbit-slides-container li {
width: 100%;
height: 100%;
background-size: cover;
}
```
Not quite sure on details of the caption but the code is automatically generated you can adjust it as you see fit, i.e. position:absolute/relative etc you may just need some work on the media queries so it is good on all devices

hope this helps

Shreekar Chonkar over 5 years ago

Hey Steve,
The link you've posted seems like the thing that'd give me a full screen slider, but I don't really want the clipping to happen. how do i do that?


Never mind. I think it'll work this way :P

darth vader over 5 years ago

Hi friends
It's not working for me!
The ul.orbit-slides-container is showing height:0px;

Im trying to add some JS to force the height but I have no sucess yet...

Some help is very appreciated.

Thanks

darth vader over 5 years ago

I found a solution using JS and the CSS code in this post.

Rafi Benkual over 5 years ago

Here is a working example in css http://codepen.io/getsetbro/pen/Jxsuc