Javascript İle Basit Bir Slideshow Oluşturma

Web geliştiriciler için etkileyici bir kullanıcı deneyimi yaratmanın yollarından biri, web sitelerine interaktif öğeler eklemektir. Slideshow'lar, görsel içerikleri dinamik bir şekilde sunarak ziyaretçilerin dikkatini çekmek için mükemmel bir yöntemdir. Bu makalede, 'JavaScript slideshow', 'slideshow oluşturma', 'web tasarım JavaScript' ve 'slideshow kod örneği' anahtar kelimeleri çerçevesinde, basit bir slideshow oluşturma sürecini adım adım inceleyeceğiz.

HTML ile Slideshow Yapısı Oluşturma

Öncelikle, slideshow'un temel HTML yapısını oluşturmalıyız. Bu yapıda, bir container ve içinde bir dizi görsel bulunur.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript ile Basit Slideshow</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slideshow-container">
        <div class="mySlides fade">
            <img src="img1.jpg" style="width:100%">
        </div>
        <div class="mySlides fade">
            <img src="img2.jpg" style="width:100%">
        </div>
        <div class="mySlides fade">
            <img src="img3.jpg" style="width:100%">
        </div>
        <!-- Önceki ve Sonraki butonları -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

Bu HTML kodu, her biri mySlides sınıfına sahip üç slayt içerir. Ayrıca, slaytlar arasında geçiş yapmayı sağlayan 'Önceki' ve 'Sonraki' butonları da bulunmaktadır.

CSS ile Slideshow Stil Verme

Şimdi, slideshow'un stilini tanımlayalım. Bu stil, görsellerin düzgün bir şekilde görüntülenmesini ve geçiş animasyonlarını içerir.

/* Slideshow container */
.slideshow-container {
    position: relative;
    max-width: 1000px;
    margin: auto;
}

/* Slaytlar */
.mySlides {
    display: none;
}

/* Önceki ve Sonraki butonları */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Butonları pozisyonlandırma */
.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.next {
    right: 0;
    border-radius: 0 3px 3px 0;
}

/* Geçiş animasyonu */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

Bu CSS kodu, slideshow container'ının boyutlarını ayarlar, slaytları gizler ve prev ve next butonlarını konumlandırır. Ayrıca, slaytlar arasında yumuşak bir geçiş animasyonu ekler.

JavaScript ile Slideshow İşlevselliği Ekleme

Slideshow'un işlevselliğini JavaScript kullanarak ekleyeceğiz. Bu işlevsellik, slaytlar arasında geçiş yapmayı ve otomatik olarak slaytları değiştirmeyi içerir.

let slideIndex = 1;
showSlides(slideIndex);

// Önceki/sonraki kontrolleri
function plusSlides(n) {
    showSlides(slideIndex += n);
}

// Geçerli slaytı göster
function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slides[slideIndex-1].style.display = "block";
}

Bu JavaScript kodu, slaytların gösterilmesini ve prev ve next butonları ile slaytlar arasında geçiş yapılmasını sağlar. showSlides fonksiyonu, geçerli slaytı gösterir ve diğerlerini gizler.

Örnek Kod ve Uygulama

Aşağıda, yukarıda açıklanan adımları bir araya getiren tam bir örnek bulunmaktadır.

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript ile Basit Slideshow</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slideshow-container">
        <div class="mySlides fade">
            <img src="img1.jpg" style="width:100%">
        </div>
        <div class="mySlides fade">
            <img src="img2.jpg" style="width:100%">
        </div>
        <div class="mySlides fade">
            <img src="img3.jpg" style="width:100%">
        </div>
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

CSS

/* Slideshow container */
.slideshow-container {
    position: relative;
    max-width: 1000px;
    margin: auto;
}

/* Slaytlar */
.mySlides {
    display: none;
}

/* Önceki ve Sonraki butonları */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.next {
    right: 0;
    border-radius: 0 3px 3px 0;
}

/* Geçiş animasyonu */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

JavaScript

let slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slides[slideIndex-1].style.display = "block";
}

Bu makalede, 'JavaScript slideshow', 'slideshow oluşturma', 'web tasarım JavaScript' ve 'slideshow kod örneği' anahtar kelimeleri çerçevesinde, JavaScript kullanarak basit bir slideshow oluşturma sürecini adım adım inceledik. HTML ile slideshow yapısını oluşturduk, CSS ile stil verdik ve JavaScript ile işlevsellik ekledik. Bu bilgiler ve örnek kodlar ile projelerinizde etkileyici ve interaktif slideshow'lar oluşturabilirsiniz.

Responsive Web Tasarımı İçin Media Queries Kullanımı

Html5 Ve Css3 İle Basit Bir Blog Sayfası Tasarımı