page-slider | little library to add CSS transitions | User Interface library

I found this slider in JSFiddle on https://www.cssscript.com/demo/full-width-horizontal-page-slider-with-pure-html-css/ and I have changed it little bit.

I am trying to slide the sections automatically every 5 seconds in a loop. Currently, it slides down every 5 seconds but if you just visit the page and click Section Four on the header in 3rd second, after 2 seconds later it will bring you to 2nd slide but actually it should've brought you to 1st section.

I have tried to find something on thus but unfortunately, my knowledge on this very limited. Your help is much appreciated. JSFiddle

I'm having trouble with a slick.js display. The "next" arrow is displaying on the left side and doesn't seem to respond positionally when I adjust the right attribute. The "prev" arrow is displaying fine and, as far as I can tell, is being loaded the same way. My dev site is here.

Here's my CSS for this section:

See my example below:

I have completed a website (using Firefox as default browser when designing) but upon testing this in different browsers, I can see that the sliding banner section of the website is not displayed to the correct proportion in Chrome or IE.

Not just that, but the keyframes I am using to slide the images are resulting in half the images being taken out of the screen. Although I think this may be more in relation to the actual dimension adjustments of the container for the slideshow?

Here is my code which applies to the banner section:

I know it is possible to add the "Ken Burns Effect" to Swiper because I have seen it on this website: https://novibuilder.com/page-slider.html (about two-thirds of the way down). They provide the HTML code but not the CSS nor JS files that make it work.

Can anyone help me add the Ken Burns Effect to Swiper? I want to keep in the realm of free and open source.

HTML:

This should be so simple, but I've been breaking my head over this for days. I'm trying to animate my page transitions. The problem is the docs SUCK. I've followed them over and over and tried every which way, but can't get it to work.

What I want to do is slide my pages gracefully either right or left, and fade the one that is unmounting gracefully out behind it. Simple right? I am NOT using React Router for my pages.

I've tried a variety of solutions for this, but the problem seems to be on the unmounting. When the page is replaced, the existing page gets unmounted before it can transition out. I'm posting my attempt with react-transition-group, though at this point, I'll accept any other solution that works. I'm not sure react-transition-group is being actively maintained actually, because there are numerous other postings for help with 0 responses.

So on my app container I want to put something like this:

I'm aware of the already hundreds of questions that exist on this topic, but after close review of dozens of questions they're all including script tags in the wrong order. Mine is correct.

As per the documentation:

Trying to implement slider in angular 4.

The following is slider.component.ts

I am trying to convert an existing project to use lazy loading, but I cannot get any routes loaded in the app.module.

app.module.ts: