The world's simplest and smallest slider
As a layout designer at that time, I perfectly understood how plugins work and repeatedly poked around the front-end with an inquisitive mind, trying to achieve minification of the code and optimize work with CSS or the same layout.
The slider was born after a few experiments with z-index and, to my surprise, the program was only 10 lines. I did not transform the images into background-image and left the ability to scroll through even layout blocks.
Here is the HTML for the scene container:
<figure>
<img src="./graphics/R-1.png" alt="RevolveR Labs" />
<img src="./graphics/R-2.png" alt="RevolveR Labs" />
<img src="./graphics/R-3.png" alt="RevolveR Labs" />
<img src="./graphics/R-4.png" alt="RevolveR Labs" />
</figure>
Let's add some CSS that will load the image tags into one deck at X: 0 and Y: 0 (top: 0px and left: 0px):
figure {
background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);
box-shadow: inset 0 0 1vw #000;
outline: .2vw solid #b1917fbd;
border: .1vw dashed #999;
display: inline-block;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 auto;
width: 36.46vw;
height: 22vw;
}
figure img {
position: absolute;
width: 36.46vw;
height: 22vw;
opacity: 1;
left: 0;
top: 0;
}
I no longer use static values such as PX in the layout due to the appearance of 8K and more monitors, but I do everything on scalable view port units, which allows me to avoid the stairs to media-queries and design interfaces for any screen resolution.
Now let's write a JavaScript handler that will simply flip through the deck without any effects with a time interval:
var e = document.querySelectorAll('figure img');
let i = 0;
if(e) {
void setInterval(() => {
e[i].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
e[i].style.zIndex = 1;
}, 3000);
}
We use setInteval to vacuum on initialization for 3 seconds and implement a resettable iterator on a pseudo loop. At each next tick of the timer, change the z-index of the desired image in order. The z-index of the previous image is permanently reset to 0, and the current loop element is brought to the front by setting the z-index to 1.
That's it. The world's simplest and smallest slider is ready, reliable and elementary like a Kalashnikov assault rifle. Now the whole deck is ticking and the current pseudo loop item comes to the fore. It all works without third party in pure JavaScript.
Add effects
Rotor (as I called it) came out too simple and I wanted to add some transition effects. To do this, you already have to use a library that knows how to animate CSS with cool easing effects (there are 43 of them in RevolveR).
Here is the listing:
let launch = RR.browser;
RR.allowSlide = true;
var e = RR.sel('figure img')
let i = 0;
void setInterval(
() => {
if( e && RR.allowSlide ) {
RR.animate([ e[ i ] ], ['opacity:0:800:lienar'], () => {
e[ i ].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
RR.animate([ e[ i ] ], ['opacity:.8:800:swingTo'], () => {
e[ i ].style.zIndex = 1;
});
});
}
},
3000);
Here, a callback sequence is implemented to complete the state of the animation, which in total time fits during the setInterval timer type and we get cool transitions with fading and flickering.
Everything is fine, but we will also add a delay by flipping the flag when the pointer is over the stage:
RR.event('figure img', 'mouseenter', () => {
RR.allowSlide = null;
RR.event('figure img', 'mouseleave', () => {
RR.allowSlide = true;
});
});
Rotor by RevolveR Labs in action
See the Rotor in action here .
As you can see, there is not so much code here either, and more complex and interesting effects can be implemented. But that's up to you.