Bootstrap Bileşenler Carousel 2

Bootstrap Carousel, Bootstrap framework'ü kullanarak web sitenizde görsel veya içerik kaydırma (slideshow) oluşturmanızı sağlayan bir bileşendir. Bootstrap 5 ile birlikte gelen Carousel bileşeni, kullanıcıların içerikleri veya resimleri kaydırarak görüntülemelerini kolaylaştırır. İşte Bootstrap Carousel'in temel özellikleri ve nasıl kullanıldığına dair bir açıklama:

Bootstrap Carousel Özellikleri

Otomatik Kaydırma: Carousel, belirli bir zaman aralığında otomatik olarak kaydırılabilir.
Kontrol Düğmeleri: Kullanıcılar, önceki ve sonraki içerikleri görüntülemek için kontrol düğmelerini kullanabilir.
Göstergeler: Hangi kaydırma slaytında olduğunuzu gösteren noktalar.
Gelişmiş Özelleştirme: İçerik, resimler ve animasyonlar üzerinde geniş bir özelleştirme yelpazesi sunar.

Kullanım Örneği

Aşağıda basit bir Bootstrap Carousel örneği bulunmaktadır. Bu örnekte, üç slayt içeren bir carousel oluşturulmuştur.

HTML Kodu





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Carousel Example</title>
</head>
<body>

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image1.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>Birinci Slayt Başlığı</h5>
                <p>Birinci slayt açıklaması.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>İkinci Slayt Başlığı</h5>
                <p>İkinci slayt açıklaması.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="image3.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>Üçüncü Slayt Başlığı</h5>
                <p>Üçüncü slayt açıklaması.</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true">
</span>
        <span class="visually-hidden">Önceki</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true">
</span>
        <span class="visually-hidden">Sonraki</span>
    </button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js">
</script>
</body>
</html>

Açıklama

<div id="carouselExample" class="carousel slide"> : Carousel bileşeninin başlangıcını belirtir.
<div class="carousel-inner"> : Tüm slaytları içeren kapsayıcıdır.
<div class="carousel-item active"> : İlk slaytı belirtir. active sınıfı, bu slaytın başlangıçta görünmesini sağlar.
<img src="image1.jpg" class="d-block w-100" alt="..."> : Slaytta gösterilecek resmi belirtir.
Kontrol Düğmeleri: Kullanıcıların önceki veya sonraki slayta geçmesini sağlar.

Önemli Notlar

Resim kaynaklarını (src değerlerini) kendi resim dosyalarınızla değiştirin.
Bootstrap CSS ve JavaScript dosyalarının doğru yüklendiğinden emin olun.

Bootstrap Carousel, içeriklerinizi görsel olarak çekici bir şekilde sunmanıza yardımcı olur. Kullanıcı etkileşimini artırmak için harika bir araçtır!

Bootstrap Carousel Özellikleri

Kullanım Örneği

HTML Kodu

Açıklama

Önemli Notlar

Yorum Ekle

Components

Ençok Okunankar

Tags

Sayfalarımız