Circular Image Slider With Pure CSS

Preview:

Description:

A fancy CSS-only slider that rotates through a set of images in a circle.

How to use it:

1. Add images to the image slider.

<div class="slider">
  <img src="1.jpg" alt="Alt 1" />
  <img src="2.jpg" alt="Alt 2" />
  <img src="3.jpg" alt="Alt 3" />
  ...
</div>

2. The main CSS styles for the image slider.

.slider  {
  --s: 280px; /* slider size */
  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  overflow: hidden;
  padding: calc(var(--s)/20);
  border-radius: 50%;
  position: relative;
}
.slider::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit;
  border-radius: inherit;
  background: repeating-conic-gradient(#789048 0 30deg,#DFBA69 0 60deg);
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.slider > img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform-origin: 50% 120.7%;
}

3. Enable the rotate animation using CSS3 transforms.

.slider::after,
.slider > img {
  animation: m 8s infinite cubic-bezier(.5,-0.2,.5,1.2);
}
.slider > img:nth-child(2) {animation-delay: -2s}
.slider > img:nth-child(3) {animation-delay: -4s}
.slider > img:nth-child(4) {animation-delay: -6s}
@keyframes m {
  0%,3%    {transform: rotate(0)}
  22%,27%  {transform: rotate(-90deg)}
  47%,52%  {transform: rotate(-180deg)}
  72%,77%  {transform: rotate(-270deg)}
  98%,100% {transform: rotate(-360deg)}
}