Merhaba,
Sliderı özelleştirmek için şu adımları takip edebilirsiniz:

HTML kodunuzda bir div etiketi oluşturun ve bunu sliderın yerleştirileceği alan olarak belirleyin.

Bu div etiketine bir background-image özelliği atayarak, yumuşak kenarlı bir yuvarlak veya oval slider arka planı oluşturabilirsiniz.

Sliderınızın içerik alanı için bir başka div etiketi oluşturun ve bu div etiketine gerekli stil özelliklerini (genişlik, yükseklik, position, z-index vs.) atayarak içeriği bu divin içine yerleştirin.

Slider, dönüş animasyonunu CSS anahtar çerçeveleri (keyframes) kullanarak yapabilirsiniz. İlk adımda, slider için bir keyframe adı oluşturun (örneğin “sliding”) ve başlangıç konumunu belirleyin. Ardından, ilerleme süresi boyunca slider’ı döndürmek için bir başka keyframe (örneğin “sliding-end”) tanımlayın ve son konumu belirleyin. Daha sonra, bu keyframe’leri animation özelliği ile birlikte slidera atayabilirsiniz.

Coffee bean’lerini PNG olarak slider etrafına yerleştirebilirsiniz. Ancak, içerik alanının üzerinde slider yerleştirildiğinde, Coffee bean’lerini içerik alanının içinde yerleştirmeniz gerekir. Bunu sağlamak için, Coffee bean’leri içerik alanının altındaki bir başka div etiketine yerleştirebilirsiniz. Bu div etiketi için, position, z-index ve diğer stil özelliklerini doğru bir şekilde ayarlamayı unutmayın.

Örnek bir HTML ve CSS kod yapısı:

<div class="slider-container">
  <div class="slider"></div>
  <div class="content">
    <h1>Bu alana ilgili içerik girilecek</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

.slider-container {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.slider {
  width: 400px;
  height: 400px;
  background-image: url(slider-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  animation: sliding 5s infinite;
  position: absolute;
  z-index: 1;
}

@keyframes sliding {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.content {
  width: 300px;
  height: 300px;
  background-color: gray;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
}

Bu kodları kullanarak slider’ınızı özelleştirebilirsiniz. Umarım yardımcı olmuşumdur.