How this slider interaction was created

Thanks for sharing👍

The fish slider interaction is much more complex and advanced than the other links you posted. Right-clicking on the outside of the anatomy course lets me choose Inspect from the context menu. That opens the developer console (DevTools), and under the Sources tab we can navigate to the actual JavaScript used by the developer:

The short version is that both images are there on screen at the same time (aa.jpg and aa1.jpg) and that Greensock is used to hide/reveal the top-level picture of the outside of the fish. The solution though is more or less pure CSS and JavaScript, which are more complex than the basic sliders you linked to.

How many layers do you think was there in Anatomy of a Fish

Hi Daniel! I believe it's similar logic but not quite the same. This tutorial should help with the slider specifically: 

Using Sliders in Storyline | E-Learning Heroes