Simple image slider made with vanilla js
- All images are -200px / 200px to right and one is at 0px.
- No need to manipulate DOM, images always at the same positions
- Position of images recognized by 'left', 'shown' and 'right' classes
- Difficult operation that can lag when reaching edges
- Similarly like above but displayed image is always middle one in DOM
- When moving slider edge image must move to beginning or end of container
- Removes edge problem
3. Gradually moving hidden images
- Hidden images are literally hidden with CSS and they smoothly transition from -200px through 0 to 200px
- Or images are really further (200px, 400px, 600px) but after halfway they swap (from 600px to -600px): it should fix images overlapping when fast sliding
- When image is in one of 3 edge states it should be visible (-200 px, currentIndex, 200px) so that animation works correctly
- All images must be updated on every slide
- There shouldn't be any difference on which image is clicked