Container Slideshow Blocks in full-screen

partnersolution

Hi All,

is there a way to let "container slideshow blocks" go full-screen? I mean, automatically resize these blocks to the viewport?

Thank you for your answers!

aman204

partnersolution To avoid confusion or ambiquity, Can you provide screenshot marked with annotations as to what you wished to derive ?

partnersolution

Hi Aman,
thank you for your answer.

I've attached a screenshot to explain what I would like:
- in yellow, you have the normal size of the container-slideshow block, and in red color, the size I would like to achieve ( full-screen ).

Waiting for your answer,
regards

aman204

partnersolution I am afraid that achieving something like as shown in screenshot would break the layout as the slideshow elements would overlap other content blocks and render the elements inconsistently with absolute positioning with slideshow also not functioning properly and would require heaps of customizations too.

Conclusively, I would say it to be unviable as the content-block parent divs are structured to be positioned one after other which is seen explicitly for usual layouts

Moreover, the same would overlap the menu items and logo henceforth, not letting them to function effectively as they are functioning normally in current stage as envisaged

partnersolution

Hi Aman,
I understand your answer, but I'm trying to understand if it is possibile, in the builder, to achieve a block like this ( image in attach ).

SInce I've seen many hero blocks that go fullscreen, I hoped I could have even a slider fullscreen, with the logo and navigation just like in the picture i've attached...

aman204

partnersolution Hi

Kindly confirm as I assume you wish to have the slideshow layout somewhat like this as seen in JA Alumni

partnersolution

Yes Aman, it's like dat one in JA Alumni

aman204

partnersolution The last screenshot makes it explicitely clear as to what you wished to achieve 🙂

Can you provide a link to your site along with respective content blocks enabled which would enable me to try to suggest further for css rule-sets and declarations which can be added in order to achieve the same

partnersolution

Thank you Aman,
but I'm just designing this new website ( wireframe, etc.. ) and I don't have a space to test it yet. Could you help me, telling the css rule-sets and declaration I have to use to achieve that kind of block? And which builder block I have to modify?

It would be very usefull for us.

Waiting for your answer,
regards.

aman204

partnersolution Try add this to custom fields of JA Builder and adjust values accordingly :

.jub-page .header{ background: none;padding-top: 32px;padding-bottom: 32px;position: absolute;width: 100%;height:120px;z-index: 9999;}

Ensure to clear your browser cache if changes dont reflect

partnersolution

Thank you Aman,
as soon as I have the space to test it, i will use your code and maybe I will be back at you 🙂

Have a nice day Aman,
thanks for your help.

paulus1031

Please get back to us if you need further assistance

Cheers
Paul

partnersolution

Hi Aman, Hi Paulus,
thank you for your support!

I've tried the code Aman sent here. But - if I've understood- it is usefull to keep the navigation bar above the slider. But the slider doesn't go in full-screen mode...
...Have I missed something?

I'm trying the code in this page ...it is not the definitive website, I've just added this page to test the slider 🙂

Waiting for your reply,
regards!

aman204

partnersolution I've tried the code Aman sent here. But - if I've understood- it is usefull to keep the navigation bar above the slider. But the slider doesn't go in full-screen mode...

Appears fine for me. Ref: Screenshot You may change the container-slideshow content block to another option available if you wished to see minimal features view and more of slideshow-images

partnersolution

Hi Aman,

I see the slider is 100% large but the height doesn't occupy the dimension of the screen... Image in attach

aman204

partnersolution For this, You can try add this to custom fields of JA Builder and adjust height value accordingly :

.jub-block.container-slideshow-2 .container-slideshow .item{height:900px !important;}

partnersolution

Thank you Aman, your code works!

The only thing I'm not sure of, is the height size expressed in pixel... how can it fit to every viewport if there is a pixel size?

I'm trying to use the "vh" value: height: 100vh;
This kind of size, let the content of the slider fill the whole viewport. I don't see the bottom buttons to control the slider but I think I have to pick the right element to insert your code ( or change the type of block container 🙂 )

Thanks again Aman, your support is so precious!
Dave

aman204

partnersolution The only thing I'm not sure of, is the height size expressed in pixel... how can it fit to every viewport if there is a pixel size?
I'm trying to use the "vh" value: height: 100vh;

You are welcome 🙂

Yes, Using vh instead of px is more viable to adjust for varied viewports especially when there is height of much higher value however, getting it right for older browsers could be bit tricky due to compatiability issues at times