Slideshow Container repsonsive size

[Sebastian]

Hello,

Great theme! Really enjoy working with it!

I have a question regarding implementing a slideshow.

I want to show (landscape & portrait) images and youtube videos in a minimal slideshow (including captions). As the images have different aspect ratios, each item should be contained within the slideshow, so that they look good and do not jump in the height.
I have found Slider Pro (https://codecanyon.net/item/slider-pro-responsive-wordpress-slider-plugin/253501) offering the features.

The Slider offers responsive design. Now I would like to implement it into the page so that it automatically detects the height visible in the window and resizes itself to this height so that the full slider is visible without scrolling.

I guess I could do this with a container, which has the height attributed to it.
How can I get the javascript working for this container?

Thanks very much!
Best regards,
Sebastian

[David]

Hi there,

its somewhat out of our scope but if i could see the slider in place on a page with the different height elements i may be able to advise. Its impossible to tell without seeing how their code outputs the content.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastian]

Hello David,

Thanks very much for your answer.

Here’s the Slider in a page: https://franzbergmueller.net/ausstellungen/fotohof/

Basically, I would like to have the same responsive behaviour as with resizing the width.

I have thought about putting the slider inside a container with height:100vh, but I have not been able to implement it correctly I guess.

Thanks again!

[David]

Looking at the plugins features it includes: Full Width and Full Window
Have you tried this option? It may use JS to break out the container, if it doesn’t then test it by using the GP Layout module to create a Full Width Pagebuilder container:

https://docs.generatepress.com/article/page-builder-container/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastian]

Hello Dave,

Thanks for your answer.

I’ve tried the plugin settings, but there it just fit 100% of the width, extending vertically over the window and you need to scroll.
Also with the GP Layout setting to Full Width, it does the same.

Is it possible to create a container, which fits the viewport horizontally and vertically and sizes automatically to it, disabling the scrolling?
Like if you use a lightbox, which automatically sizes itself to the screen?

Thanks again!

If it would help, I could also give to access to the WordPress instance.

If you know another solution, where I can use images and youtube videos inside a responsive slideshow, I am happy to use another way.

[David]

i can’t say this will work but its about all i can offer – try this CSS to force the elements to fit the screen:

.sp-mask, .sp-image-container {
    height: 100vh !important;
    width: 100vw !important;
}

.slider-pro img.sp-image  {
    height: 100vh !important;
}

You will need to add the slider to a full width container – so to test you can use the Layout Meta box to select the Page builder Container = Full Width.

https://docs.generatepress.com/article/layout-metabox-overview/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastian]

Hi David,

Thanks very much for your support! I have switched to another plugin (justified image grid) and use a thumbnail styled gallery as the above does not really work as supposed.

Thanks for your fantastic support!

Best Sebastian

[David]

Glad to hear you found a good solution – and thanks for sharing that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts