Aşağıdaki HTML ve CSS kodları, bir blog için kayar resim şablonunu oluşturmanıza yardımcı olabilir:
HTML Kodları:
<div class="slider-container">
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
CSS Kodları:
.slider-container { width: 100%; overflow: hidden; } .slider { display: flex; width: 300%; animation: slide 10s infinite; } .slider img { width: 33.33%; } @keyframes slide { 0% { transform: translateX(0%); } 100% { transform: translateX(-200%); } }
Bu kodlar, kayar resimlerin bir konteyner içinde bir dizi resim olarak yerleştirilmesini sağlar. slider-container sınıfı, kayan resimlerin görünür alanını sınırlar ve slider sınıfı, kayan resimleri içerir ve bunları yatay olarak hizalar. slider img sınıfı, resimlerin boyutlarını ve yatay hizalamayı ayarlar. @keyframes yönergesi, resimlerin kaydırılması için bir animasyon oluşturur.
Bu şablonu kullanarak, kayan resimlerinizi src özniteliği ile belirtebilir ve alt özniteliği ile bir alternatif metin ekleyebilirsiniz. Ayrıca, resim boyutlarınızı veya animasyon süresini CSS kodlarındaki değerleri değiştirerek değiştirebilirsiniz.