“CSS ile Basit Bir Resim Galerisi Oluşturma Rehberi”

Resim galerileri, web sitelerinde görsel içeriğin etkili bir şekilde sunulmasını sağlayan önemli bir unsurdur. CSS kullanarak basit bir resim galerisi oluşturmak oldukça kolaydır ve bu yazıda, adım adım nasıl yapılacağını öğreneceksiniz.

1. HTML Yapısını Oluşturma:

Öncelikle, resim galerisinin temel HTML yapısını oluşturmalıyız. Bunun için bir <div> konteynırı içinde resimlerimizi <img> etiketleriyle tanımlayacağız.

<div class="gallery">
  <img src="resim1.jpg" alt="Resim 1">
  <img src="resim2.jpg" alt="Resim 2">
  <img src="resim3.jpg" alt="Resim 3">
</div>

2. CSS ile Galeri Tasarımını Ayarlama:

Şimdi CSS kullanarak galerimize bir tasarım verelim. Öncelikle, galeri konteynırının genel görünümünü tanımlayalım ve içerdiği resimlerin yan yana sıralanmasını sağlayalım.

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery img {
  width: 250px;
  height: 150px;
  margin: 10px;
}

Bu CSS kodları, resimlerin galeri içinde yan yana sıralanmasını ve belirli bir boyuta sahip olmasını sağlar.

3. İleri Geri Düğmelerini Ekleyerek Gezinme İmkanı Sağlama:

Son olarak, resim galerimize ileri ve geri gezinme düğmeleri ekleyelim. Bu düğmeler, kullanıcıların galeride ileri ve geri gitmesini sağlar.

<button class="prev" onclick="prevSlide()">❮</button>
<button class="next" onclick="nextSlide()">❯</button>

var slideIndex = 0;

function showSlides() {
  var slides = document.getElementsByClassName("gallery");
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000); // 2 saniye aralıklarla otomatik geçiş yapar
}

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

Bu JavaScript kodları, resimler arasında gezinmeyi sağlar ve her 2 saniyede bir otomatik olarak resimleri değiştirir.

4. Sonuç:

Artık HTML ve CSS kullanarak basit bir resim galerisi oluşturduk. Bu galeri, web sitenize görsel içerik eklemek için harika bir başlangıç noktasıdır. Dilerseniz, tasarımı ve özellikleri daha da geliştirebilirsiniz.

Bu rehber, CSS kullanarak basit bir resim galerisi oluşturmanın temel adımlarını içerir. Bu adımları takip ederek, kendi projenize uygun bir resim galerisi oluşturabilirsiniz.