Picture sliders (additionally referred to as carousels) are in all places. There are numerous CSS tips to create the frequent slider the place the pictures slide from left to proper (or the alternative). It’s the identical cope with the various JavaScript libraries on the market that create fancy sliders with advanced animations. We aren’t going to do any of that on this submit.
By means of just a little sequence of articles, we’re going to discover some fancy and unusual CSS-only sliders. If you’re of drained seeing the identical ol’ traditional sliders, then you might be in the precise place!
For this primary article, we are going to begin with one thing I name the “round rotating picture slider”:
Cool proper? let’s dissect the code!
The HTML markup
In case you adopted my sequence of fancy picture decorations or CSS grid and customized shapes, then you understand that my first rule is to work with the smallest HTML potential. I at all times attempt exhausting to search out CSS options earlier than cluttering my code with loads <div>s and different stuff.
The identical rule applies right here — our code is nothing however a listing of photos in a container.
Let’s say we’re working with 4 photos:
<div class="gallery">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>That’s it! Now let’s transfer to the attention-grabbing a part of the code. However first, we’re going to dive into this to grasp the logic of how our slider works.
How does it work?
Here’s a video the place I take away overflow: hidden from the CSS so we are able to higher perceive how the pictures are shifting:
It’s like our 4 photos are positioned on a big circle that rotates counter-clockwise.
All the pictures have the identical dimension (denoted by S within the determine). Observe the blue circle which is the circle that intersects with the middle of all the pictures and has a radius (R). We’ll want this worth later for our animation. R is the same as 0.707 * S. (I’m going to skip the geometry that provides us that equation.)
Let’s write some CSS!
We might be utilizing CSS Grid to position all the pictures in the identical space above one another:
.gallery {
--s: 280px; /* management the scale */
show: grid;
width: var(--s);
aspect-ratio: 1;
padding: calc(var(--s) / 20); /* we are going to see the utility of this later */
border-radius: 50%;
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
top: 100%;
object-fit: cowl;
border-radius: inherit;
}Nothing too advanced to this point. The tough half is the animation.
We talked about rotating a giant circle, however in actuality, we are going to rotate every picture individually creating the phantasm of a giant rotating circle. So, let’s outline an animation, m, and apply it to the picture parts:
.gallery > img {
/* identical as earlier than */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { rework: rotate(-360deg); }
}The principle trick depends on that highlighted line. By default, the CSS transform-origin property is the same as middle (or 50% 50%) which makes the picture rotate round its middle, however we don’t want it to try this. We’d like the picture to rotate across the middle of the large circle that comprises our photos therefore the brand new worth for transform-origin.
Since R is the same as 0.707 * S, we are able to say that R is the same as 70.7% of the picture dimension. Right here’s a determine for instance how we bought the 120.7% worth:
Let’s run the animation and see what occurs:
I do know, I do know. The result’s removed from what we wish, however in actuality we’re very shut. It might appears to be like like there’s only one picture there, however don’t overlook that we now have stacked all the pictures on prime of one another. All of them are rotating on the identical time and solely the highest picture is seen. What we’d like is to delay the animation of every picture to keep away from this overlap.
.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */Issues are already getting higher!
If we cover the overflow on the container we are able to already see a slider, however we are going to replace the animation just a little so that every picture stays seen for a brief interval earlier than it strikes alongside.
We’re going to replace our animation keyframes to do exactly that:
@keyframes m {
0%, 3% { rework: rotate(0); }
22%, 27% { rework: rotate(-90deg); }
47%, 52% { rework: rotate(-180deg); }
72%, 77% { rework: rotate(-270deg); }
98%, 100% { rework: rotate(-360deg); }
}For every 90deg (360deg/4, the place 4 is the variety of photos) we are going to add a small pause. Every picture will stay seen for 5% of the general period earlier than we slide to the following one (27%-22%, 52%-47%, and so forth.). I’m going to replace the animation-timing-function utilizing a cubic-bezier() operate to make the animation a bit fancier:
Now our slider is ideal! Properly, nearly good as a result of we’re nonetheless lacking the ultimate contact: the colourful round border that rotates round our photos. We are able to use a pseudo-element on the .gallery wrapper to make it:
.gallery {
padding: calc(var(--s) / 20); /* the padding is required right here */
place: relative;
}
.gallery::after {
content material: "";
place: absolute;
inset: 0;
padding: inherit; /* Inherits the identical padding */
border-radius: 50%;
background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
masks:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
}
.gallery::after,
.gallery >img {
animation: m 8s infinite cubic-bezier(.5, -0.2, .5, 1.2);
}I’ve created a circle with a repeating conic gradient for the background whereas utilizing a masking trick that solely exhibits the padded space. Then I apply to it the identical animation we outlined for the pictures.
We’re carried out! We’ve a cool round slider:
Let’s add extra photos
Working with 4 photos is nice, however it might be higher if we are able to scale it to any variety of photos. In spite of everything, that is the aim of a picture slider. We must always be capable of take into account N photos.
For this, we’re going to make the code extra generic by introducing Sass. First, we outline a variable for the variety of photos ($n) and we are going to replace each half the place we hard-coded the variety of photos (4).
Let’s begin with the delays:
.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */The formulation for the delay is (1 - $i)*period/$n, which supplies us the next Sass loop:
@for $i from 2 to ($n + 1) {
.gallery > img:nth-child(#{$i}) {
animation-delay: calc(#{(1 - $i) / $n} * 8s);
}
}We are able to make the period a variable as nicely if we actually wish to. However let’s transfer on to the animation:
@keyframes m {
0%, 3% { rework: rotate(0); }
22%, 27% { rework: rotate(-90deg); }
47%, 52% { rework: rotate(-180deg); }
72%, 77% { rework: rotate(-270deg); }
98%, 100% {rework: rotate(-360deg); }
}Let’s simplify it to get a greater view of the sample:
@keyframes m {
0% { rework: rotate(0); }
25% { rework: rotate(-90deg); }
50% { rework: rotate(-180deg); }
75% { rework: rotate(-270deg); }
100% { rework: rotate(-360deg); }
}The step between every state is the same as 25% — which is 100%/4 — and we add a -90deg angle — which is -360deg/4. Meaning we are able to write our loop like this as an alternative:
@keyframes m {
0% { rework: rotate(0); }
@for $i from 1 to $n {
#{($i / $n) * 100}% { rework: rotate(#{($i / $n) * -360}deg); }
}
100% { rework: rotate(-360deg); }
}Since every picture takes 5% of the animation, we alter this:
#{($i / $n) * 100}%…with this:
#{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}%It must be famous that 5% is an arbitrary worth I select for this instance. We are able to additionally make it a variable to regulate how a lot time every picture ought to keep seen. I’m going to skip that for the sake of simplicity, however for homework, you possibly can attempt to do it and share your implementation within the feedback!
@keyframes m {
0%,3% { rework: rotate(0); }
@for $i from 1 to $n {
#{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}% { rework: rotate(#{($i / $n) * -360}deg); }
}
98%,100% { rework: rotate(-360deg); }
}The final bit is to replace transform-origin. We’ll want some geometry tips. Regardless of the variety of photos, the configuration is at all times the identical. We’ve our photos (small circles) positioned inside a giant circle and we have to discover the worth of the radius, R.
You in all probability don’t need a boring geometry clarification so right here’s how we discover R:
R = S / (2 * sin(180deg / N))If we specific that as a share, that provides us:
R = 100% / (2 * sin(180deg / N)) = 50% / sin(180deg / N)…which implies the transform-origin worth is the same as:
transform-origin: 50% (50% / math.sin(180deg / $n) + 50%);We’re carried out! We’ve a slider that works with any quantity photos!
Let’s toss 9 photos in there:
Add as many photos as you need and replace the $n variable with the whole variety of photos.
Wrapping up
With just a few tips utilizing CSS transforms and customary geometry, we created a pleasant round slider that doesn’t require numerous code. What’s cool about this slider is that we don’t have to trouble duplicating the pictures to maintain the infinite animation since we now have a circle. After a full rotation, we are going to get again to the primary picture!
