HTML Explanation
01
Within the <body>, there is a div with the class box, which acts as the container for the slider.
02
Inside this container, several div elements with the class item represent individual slides. Each item has an inline style attribute that sets a custom background image via a CSS variable (--img) and a data-text attribute containing descriptive text for the image.
CSS Explanation
01
A universal selector (*) resets margins and paddings, and the body is styled to center its content with a dark blue background (#080e2b).
02
The .box class styles the slider container with fixed dimensions, centering it on the page.
03
Each .item within the box is styled to occupy the full width and height of the container, with its background set to the image defined by the --img variable.
04
A transition effect smoothens the animations.
05
To achieve the stacking and sliding effect, the .item elements are positioned absolutely.
06
Different nth-child pseudo-classes are used to define their initial transformations, such as rotation and translation along the X and Y axes.
07
This creates a layered visual effect, simulating depth and motion.
08
The ::before pseudo-element adds descriptive text from the data-text attribute of each item.
09
The text is styled with a large font size and opacity for a fading effect, transitioning smoothly when the images move.
Javascript Explanation
01
The box element is selected, and two functions, moveNext and movePrev, handle the movement of the images.
02
moveNext appends the first item to the end of the container, while movePrev prepends the last item to the beginning.
03
This manipulation creates an infinite loop effect.
04
The script listens for wheel events to detect user scrolling.
05
When the user scrolls down (deltaY > 0), the moveNext function is called to move the images forward.
06
Conversely, scrolling up triggers the movePrev function to navigate backward.
HTML
CSS
JS
CSS