Customizing Dsonesuk's Manual and Automatic Slideshow

[monkeyboard]

Hey,

I am a beginner in desperate need of help. I tried to build a slideshow using the code that dsonesuk provided here:
http://w3schools.invisionzone.com/topic/55499-combine-the-manual-and-automatic-slideshow-script-into-one-script/page/2/
I wanted to strip it of parts that I don’t need and add some small modifications.

 

What’s the goal? (See image below)

An automatic slideshow with „index indicators“ that can manually be triggered. The active one is highlighted and if you hover over any of the indicators, the slideshow stops until unhovered. So far all features are provided by dsonesuk’s code. I wanted to add a few visual tweaks, animations, a bigger hitbox for the indicators and throw out the code that I don't need.

 

What are the problems?

I have been trying to build this slideshow for two days now and my motivation has taken a little bit of a hit. While working on it, some of the elements seem to behave unexpectedly. It might also have to do with the Firefox browser developer tool I am using since some issues don't occur if I scale the browser window by hand but only when mobile presets of the browser are used (using Firefox Quantum 68.0.1, 64-Bit). The version I am showing you right now has some bugs I just don’t know how to fix:

1. The whole .slideshow is not positioned in the center as it should be (visible in screen sizes wider than 1280px). This is because the .slideshow is an inline-block element. But if I set it to just inline or block, the slideshow glitches into the following div (in larger screen sizes).
2. The smaller you make the browser size, the more #myslideFrame expands in height, messing with the positioning of the whole slideshow. I think the JS is responsible for that, but I don’t know how to fix it. Strangely, reloading fixes the issue (until browser window gets resized from big to small again).
3. I can’t get the index indicators back „over“ the img.
4. Any thoughts on the hitbox for the index indicators? I can’t get them to work either.
    

What's the code?

You can find the HTML, CSS and JS files attached beneth. The download section doesn't seem to manage folders very well (or at all). But the files "img1.jpg", "img2.jpg" and "img3.jpg" need to go into a folder called "img" in order for the code to work properly.

There are a few bits of code that I am not entirely sure if they are still necessary (remaining from dsoneuk's code). As I said I am still learning and this thing grew over my head quickly.

Thanks!

fact.html script.js style.css .DS_Store

Edited August 6, 2019 by monkeyboard