I can't make a simple slider to embed it in the site

[Bogdan]

Friends, I need your help.

Seems like a simple task:

1. screenshot the program windows with menus, tabs, etc., and then
2. sequentially change them as in a normal slider, and additionally
3. add a mouse animation, as if I click in the demonstrated program.

But then I can't embed this "slider" into the page of the site.

When the slider is scaled, it leaves a lot of empty space at the bottom of itself, and it breaks the entire layout of the site.

I've tried all the options: scene size and scale, flexible layout, pins & sizing, scale behavior — nothing worked.

How do I make a slider so that it scales exactly to the borders of its images? How do I make it behave as if it were an ordinary picture ? We insert an ordinary image into the page, and it scales perfectly. A slider is essentially the same images, but it doesn't work.

Friends, is it realistic to insert this (see attachment) on the page of the site, so that at the bottom it does not make a huge basement behind itself?

Example.zip (1.7 MB)

[h_classen (Hans-Gerd Claßen)]

in your case the ratio for the Hypedoc should remain, therefor you'd need to embed it in a wrapper-html-element that maintains the ratio you'd like to have ...

one possible example:

Hype in WordPress = iframe's height fails to shorten

Yes, exactly (added as it is, to a page with Classic Editor). In my case I made a 16x10 box, infact I added to the theme the CSS part as following: .hype-box-16x10 { position: relative; width: 100%; height: 0; padding-top: 62.50%; margin-bottom: 20px; } .hype-iframe { position: absolute; top: 0; width: 100%; height: 100%; border: none; overflow: hidden; } Where 62.50% refers to 16/10 ratio. The sole part I didn't use is the following: <div class="hype-box-16x10"> <iframe class="hype-iframe…

[Bogdan]

Thank you for caring

But it still does not work. When I put the embed code in div or iframe (to limit the size) — the slider stop showing at all.

I attached an html example of what I'm talking about. See the huge white part after the slider on the page? And the text paragraph should go right below the picture.

I don't know what can be done here
site.zip (1.6 MB)
hype.zip (1.7 MB)

[Daniel]

You could add this CSS, which uses the technique @Photics used:

<!-- 1628 / 2880 = .5652, which becomes 56.52% -->
<style>
        #example_hype_container {
        position: relative;
        width: 100%;
        height: 0 !important;
        padding-top: 56.52%;
        margin-bottom: 30px !important;}
</style>

site.zip (1.6 MB)

This assumes that the ratio for your layouts will always be 1628w by 2880h.

[Bogdan]

Daniel, thank you so much! It helped.