CSS ile Dairesel Döndüren Resim Slaytı

CSS kullanarak dairesel şekilde dönen bir resim slaytı ( Circular Rotating Image Slider ) oluşturmak, web sitenize dinamik ve ilgi çekici bir unsur eklemenin harika bir yoludur. Bu slaytlar, ürünlerinizi veya hizmetlerinizi sergilemek, önemli duyuruları paylaşmak veya hikayeler anlatmak için kullanılabilir.

Bunu animasyonlu bir şekilde yapabilmek için CSS’in “keyframes” özelliğini kullanacağız.

Sizler için küçük bir örnek hazırladım, gerekli kodları aşağıda paylaşıyorum. Çalışan halini şuradan inceleyebilirsiniz. CSS Circular Rotating Image Slider (codepen.io)

HTML

<div class="imageGallery">
  <img src="https://serdarkaraca.com.tr/DemoImages/picture1.jpg" >
  <img src="https://serdarkaraca.com.tr/DemoImages/picture2.jpg" >
  <img src="https://serdarkaraca.com.tr/DemoImages/picture3.jpg" >
  <img src="https://serdarkaraca.com.tr/DemoImages/picture4.jpg" >
</div>

CSS

.imageGallery  {
	--size: 280px;
	display: grid;
	width: var(--size);
	aspect-ratio: 1;
	overflow: hidden;
	padding: calc(var(--size)/20);
	border-radius: 50%;
	position: relative;
	clip-path: circle(49.5%);
}
.imageGallery::after {
	content: "";
	background: repeating-conic-gradient(
		red 0 30deg,white 0 60deg);
	position: absolute;
	border-radius: inherit;
	padding: inherit;
	inset: 0;
	-webkit-mask: 
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.imageGallery > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	grid-area: 1/1;
	transform-origin: 50% 120.7%;
	border-radius: inherit;
}
.imageGallery::after,
.imageGallery > img {
	animation: m 8s infinite 
	cubic-bezier(.5,-0.2,.5,1.2);
}
.imageGallery > img:nth-child(2) 
	{animation-delay: -2s}
.imageGallery > img:nth-child(3) 
	{animation-delay: -4s}
.imageGallery > 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)}
}