The issue with the next/prev buttons restarting the timer and creating conflicts with the mouseenter was because the buttons were also part of the slideshow container. So the mouseenter/leave worked it’s just the clicking of the buttons restarted the slideshow while you were still moused in, essentially overriding the previous mouseenter. There is more you can do with the arrows, such as at the end of the onClick functions (prev or next) you can change the slide but not restart the timer.
What I ended up doing was adding an inner slideshow container that encompasses only the slides (no buttons or indicators) and made that the target for the mouseenter/leave. I did this to maintain the flexibility of the buttons while also incorporating the hover effect you’re looking for. I feel like the arrows/indicators shouldn’t be part of the mouseenter since then they only really go to the next/previous slides and are dependent on the mouseenter for timing. I’ve updated the codepen to reflect the above.
Should you want to continue having the arrows as part of the mouseenter/leave, just comment/uncomment out the lines indicated in the codepen.
As for the fade in issue for the first slide I can’t replicate it as the images on the codepen have broken links but once I get a little more free time I can add temp url’s to try and replicate your issue.
Let me know if there’s anything else I can clarify/help with!