Changing Slider in Block-Hero-9 template

Hi!
I love the layout of the Block-Hero-9 Template -> Link to your template
What i'm trying to do is:
Instead of the whole page as a slider-element, i'd like to use the "image-area" as a slider only ( see attached file ) - but i'm pretty lost how to get this done via css.

I know there's a hero-template Hero-14 with this "setup" but:

• the proportions are different
• the pagination is different
  Maybe it's possible to change that template ( i've tried but not successful ) to get similar layout & proportions & pagination as the hero-9 ?

Thanks in advance

Awesome, thank you so much!

Question 1 :
I've tried to mix the hero-9 with the menu from the one-page personal-template. It's working well BUT there's a little problem with the scroll-down-angle.
In this example here the angle is visible.
But as soon i'm adding content to the <section id="content">...</section> like in this example it's not working / visible.
Do you know what the problem is ?

Question 2 ( not that important ):

I'd like to add a fade-effect to that slider as well.
To use the i.e. the autoplay-function, to what element do i have to add "your" settings like data-speed="600" data-loop="true" data-autoplay="2000" mentioned in the documentation ? Because in your documentation / templates there's always ( as far as i saw ) a section with a id=slider, which isn't existing in this template -> is this element required to use "your" code ?

So i used `` for each swiper-slide div-element, like it's shown on the swiperJS documentation - the code from your documentation data-autoplay="2000" ( without swiper ) doesn't work -> is this because of the not existing id=slider parent-element ?

Awesome!

Now it's smoothly working - but now there's another small issue in this example:

When going to mainmenu -> item 1 -> the scroll-to action is executed ( here: to section-about ).
When clicking the scroll-down-angle or the "the features" button -> there's no scroll-to action ( also section-about ) triggered.

Hi!
thanks for this quick answer - updated the js-file but the issue is still there.

Strange:
This example was working when i left the id as it was ( id="section-about" ). But when changing it to a different name i.e id="section-newname" then it doesn't work anymore AND the header menu becomes transparent with no logo on the left side when scrolling down. Even after clearing the browser-cache....

Awesome - that one fixed it!
Thank you :)