Merhaba arkadaşlar, bu yazıda sizlere Owl Carousel 2 ve Slick slider eklentilerinin kullanımını anlatacağım. Her iki eklenti de benzer özellikler sunsa da, aralarında dikkat edilmesi gereken bazı küçük ama önemli farklar bulunuyor.
Öncelikle, bu iki popüler kaydırıcı (slider) eklentisinin ne olduğuna birlikte göz atalım:
Slick Nedir?
Slick, jQuery tabanlı, modern ve esnek bir içerik kaydırıcı (slider) eklentisidir. Geliştiricilere duyarlı (responsive) ve özelleştirilebilir bir yapı sunar. Basit HTML yapısıyla kolayca entegre edilebilir ve dokunmatik cihazlar için optimize edilmiştir. Otomatik oynatma, sonsuz döngü, adaptif yükseklik, özel oklar ve gösterge noktaları (dots) gibi birçok yerleşik özelliği destekler.
Owl Carousel 2 Nedir?
Owl Carousel 2, yine jQuery tabanlı bir başka güçlü içerik kaydırıcı eklentisidir. Kullanımı oldukça kolaydır ve mobil uyumlu yapısıyla öne çıkar. Çoklu öğe gösterimi, otomatik oynatma, animasyon geçiş efektleri, dokunmatik destek, RTL (sağdan sola yazım) desteği gibi özellikleri sayesinde özellikle vitrin slider’ları ve içerik galerileri için ideal bir çözümdür.
Slick ile Başlayalım
İlk olarak Slick kaydırıcıyı inceleyerek başlayacağız. Slick, sade yapısı ve güçlü özellikleriyle web projelerinde sıklıkla tercih edilen bir jQuery eklentisidir.
Slick hakkında tüm dökümantasyona resmi demosu üzerinden ulaşabilirsiniz. Bu site, eklentinin canlı örneklerini görerek nasıl çalıştığını anlamanızı sağlar.
Not: Eğer MEB internet ağı üzerinden erişim sağlıyorsanız, demo sayfası engelli olabilir. Bu durumda, temel kullanım örnekleri ve kurulum bilgileri için eklentinin GitHub sayfasını kullanabilirsiniz: 🔗 https://github.com/kenwheeler/slick
Bu kaynak üzerinden kurulum, özellikler, kullanım örnekleri ve özelleştirme seçenekleri gibi tüm detaylara ulaşmanız mümkün.
Uygulama örneğimizde, pelit adlı ZIP dosyasının içindeki index.html dosyasını kullanacağız. Gerekli hazırlık dosyasını indirmek için aşağıdaki bağlantıya tıklayabilirsiniz:
Carousel bileşenini, sayfada kırmızı ile işaretlediğim alana eklemeyi planlıyorum. Gerçek bir uygulama örneği üzerinde çalışabilmek adına bu hazır tasarımı tercih ettim. Kodlarımı, index.html dosyasının 306. satırına ekleyeceğim.
Eğer bu tasarımı kullanmak istemiyorsanız, aşağıda paylaştığım boş bir Bootstrap başlangıç şablonunu kullanarak sıfırdan kendi sayfanızı oluşturabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!doctype html> <html lang="tr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tasarım Kodlama Slick Kullanımı</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous"> </head> <body> <!-- Owl Carousel 2 Kullanacağım. --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script> </body> </html> |
Slick Carousel’i Projeye Dahil Etme (CDN ile)
Slick eklentisini hızlıca kullanmak için GitHub sayfasındaki CDN bağlantılarını kullanarak gerekli dosyaları doğrudan projenize dahil edebilirsiniz.
1. CSS Dosyalarını <head> Etiketi Arasına Ekleyin
Aşağıdaki bağlantıları HTML dosyanızın <head> etiketi içine ekleyerek stil dosyalarını yükleyin:
1 2 3 4 5 6 7 | <!-- Slick temel stil dosyası --> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <!-- Varsayılan tema (isteğe bağlı) --> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> |
2. JavaScript Dosyasını <body> Kapanış Etiketinden Hemen Önce Ekleyin
Slick’in çalışabilmesi için gerekli JavaScript dosyasını aşağıdaki gibi sayfanın en altına, </body> kapanış etiketinden hemen önce ekleyin:
1 2 3 | <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> |
Not: Slick’in çalışması için jQuery’nin de yüklü olması gerektiğini unutmayın. Eğer henüz eklemediyseniz, jQuery’yi de
<head>ya da<body>öncesinde eklemelisiniz.
jQuery’yi CDN ile Eklemek
Slick Carousel’in düzgün çalışabilmesi için jQuery kütüphanesi gereklidir. Aşağıdaki satırı, genellikle <head> etiketi içine ya da </body> etiketinden hemen önce olacak şekilde HTML dosyanıza ekleyebilirsiniz:
1 2 3 4 | <!-- jQuery CDN (Google Hosted Libraries üzerinden) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
Not: Eğer başka bir kütüphane ile sürüm çakışması yoksa, en güncel kararlı sürümü kullanmanız önerilir.
Kodunun son hali oldukça temiz ve doğru görünüyor! Birkaç küçük düzenleme ile daha net hale getirebiliriz. İşte önerdiğim haliyle:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!doctype html> <html lang="tr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tasarım Kodlama Slick Kullanımı</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous"> <!-- Slick temel stil dosyası --> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <!-- Varsayılan tema (isteğe bağlı) --> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> </head> <body> <!-- Carousel burada yer alacak --> <!-- jQuery CDN (Google Hosted Libraries üzerinden) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Slick Carousel JS --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script> </body> </html> |
Slick Örneği Hazırmak
Şimdi sıra geldi örnek bir Slick Carousel uygulaması yapmaya. Aşağıda basit bir örnek oluşturarak nasıl çalıştığını göstereceğiz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!-- Carousel --> <div class="container"> <div class="row"> <div class="col-12 mt-5"> <h2 class="text-center">Slick Carousel Örneği</h2> <div id="slick1" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'> <div><img src="https://picsum.photos/400/300?random=1" alt="Slide 1"></div> <div><img src="https://picsum.photos/400/300?random=2" alt="Slide 2"></div> <div><img src="https://picsum.photos/400/300?random=3" alt="Slide 3"></div> <div><img src="https://picsum.photos/400/300?random=4" alt="Slide 4"></div> <div><img src="https://picsum.photos/400/300?random=5" alt="Slide 5"></div> <div><img src="https://picsum.photos/400/300?random=6" alt="Slide 6"></div> <div><img src="https://picsum.photos/400/300?random=7" alt="Slide 7"></div> </div> </div> </div> </div> |
💡 Kod Açıklaması: Slick Carousel HTML Yapısı
1 2 3 4 | <!-- Carousel --> <div class="container"> |
Bu satır, Bootstrap’ın .container sınıfını kullanarak içerikleri ortalanmış ve duyarlı (responsive) bir kapsayıcıya alır. Sayfa düzeninde hizalama ve boşluklar için temel yapı görevi görür.
1 2 3 4 | <div class="row"> <div class="col-12 mt-5"> |
.row: Bootstrap grid sisteminde bir satır oluşturur.
.col-12: Bu sütunun 12 birimlik tam genişliğe yayılmasını sağlar (tek başına tüm satırı kaplar).
.mt-5: Üstten boşluk (margin-top) ekler. Sayfanın üst kısmından biraz aşağıda görünmesini sağlar.
1 2 3 | <h2 class="text-center">Slick Carousel Örneği</h2> |
Başlık etiketi. Kullanıcıya bu bölümün Slick Carousel örneği olduğunu bildirir.
.text-center: Yazıyı yatayda ortalamak için kullanılır.
1 2 3 | <div id="slick1" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'> |
Bu, Slick Carousel‘in uygulanacağı ana kapsayıcıdır.
id="slick1": JavaScript veya jQuery ile bu elementi seçmek için kullanılır.data-slick='{"slidesToShow": 4, "slidesToScroll": 4}':slidesToShow: 4: Aynı anda 4 görsel gösterilir.slidesToScroll: 4: Kaydırıldığında 4 görsel birden kayar.
1 2 3 4 | <div><img src="https://picsum.photos/400/300?random=1" alt="Slide 1"></div> ... |
Her bir <div> içindeki <img> etiketi bir slide (kayan görsel) temsil eder.
https://picsum.photos/400/300?random=...: Farklı rastgele görseller sağlayan demo hizmetidir.alt: Görsel yüklenemezse alternatif metin olarak görünür ve erişilebilirlik sağlar.
✅ Slick Carousel Başlatma Kodu
Slick Carousel’i kullanmak için iki farklı yöntemle başlatabilirsiniz: temel ve özelleştirilmiş.
1. Basit Başlatma
Varsayılan ayarlarla Slick Carousel’i çalıştırmak için aşağıdaki gibi basit bir komut yeterlidir:
1 2 3 4 5 | <script> $('#slick1').slick(); </script> |
Not: Aşağıdaki <script> etiketlerini </body> etiketinden hemen önce eklemelisiniz. Unutmayın, bu sıralama önemlidir.
Bu yöntemle carousel, varsayılan yapılandırma ile çalışır. Gelişmiş kontrol gerekmezse bu yöntem yeterlidir.
2. Özelleştirilmiş Başlatma
Slick üzerinde daha fazla kontrol sağlamak için yapılandırma seçenekleri ile başlatabilirsiniz:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script> $('#slick1').slick({ slidesToShow: 4, // Aynı anda gösterilecek slide sayısı slidesToScroll: 4, // Kaydırıldığında ilerleyecek slide sayısı infinite: true, // Sonsuz döngü aktif dots: true, // Altta küçük navigasyon noktaları gösterilir arrows: true, // Önceki/sonraki oklar aktif autoplay: true, // Otomatik geçiş başlatılır autoplaySpeed: 2000 // Her 2 saniyede bir slide değişir }); </script> |
Bu şekilde görünüm ve davranışı tamamen ihtiyacınıza göre şekillendirebilirsiniz.
📱 Mobil Uyumlu (Responsive) Slick Carousel Örneği
Aşağıdaki örnek, ekran boyutuna göre slidesToShow ve slidesToScroll sayılarını otomatik olarak ayarlayan bir yapıdadır:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <script> $('#slick1').slick({ slidesToShow: 4, slidesToScroll: 4, infinite: true, dots: true, arrows: true, autoplay: true, autoplaySpeed: 2000, responsive: [ { breakpoint: 992, // 992px altındaki ekranlar (örneğin tabletler) settings: { slidesToShow: 3, slidesToScroll: 3 } }, { breakpoint: 768, // 768px altındaki ekranlar (örneğin büyük telefonlar) settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 576, // 576px altındaki ekranlar (örneğin küçük telefonlar) settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); </script> |
📝 Açıklama:
breakpoint: Ekran genişliği piksel cinsindendir. Bu değerin altındaki cihazlarda ilgilisettingsgeçerli olur.- Böylece masaüstü, tablet ve mobil cihazlar için farklı slayt düzenleri tanımlanabilir.
Bu yapı, hem estetik hem de kullanıcı deneyimi açısından önemli bir iyileştirme sağlar.
🎯 Son Bir Örnek: Bootstrap Card ile Slick Carousel
Bu örnekte Bootstrap kart bileşenleri kullanarak görsel ve metin içeren kapsamlı bir Slick Carousel yapısı oluşturdum. Her slayt bir kart bileşeni olarak tasarlandı. Ayrıca slaytlar arasında boşluk bırakmak için özel CSS sınıfları kullandık.
💡 Stil Kodu (Boşluk Ayarı)
1 2 3 4 5 6 7 8 9 10 11 | <style> .slide-item { margin: 0 10px; /* Her kartın sağ ve solundan boşluk */ } #slick1 { margin: 0 -10px; /* Kenarlardaki toplam boşluğu dengelemek için */ } </style> |
🧩 HTML Carousel Yapısı (Bootstrap + Slick)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <div class="container"> <div class="row"> <div class="col-12 mt-5"> <h2 class="text-center">Slick Carousel Örneği</h2> <div id="slick1" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'> <!-- Her slayt bir Bootstrap kart --> <div class="card slide-item"> <img src="https://picsum.photos/400/300?random=1" class="card-img-top" alt="Slide 1"> <div class="card-body"> <h5 class="card-title">Başlık 1</h5> <p class="card-text">Bu, ilk slaytın açıklamasıdır.</p> </div> </div> <div class="card slide-item"> <img src="https://picsum.photos/400/300?random=2" class="card-img-top" alt="Slide 2"> <div class="card-body"> <h5 class="card-title">Başlık 2</h5> <p class="card-text">Bu, ikinci slaytın açıklamasıdır.</p> </div> </div> <div class="card slide-item"> <img src="https://picsum.photos/400/300?random=3" class="card-img-top" alt="Slide 3"> <div class="card-body"> <h5 class="card-title">Başlık 3</h5> <p class="card-text">Bu, üçüncü slaytın açıklamasıdır.</p> </div> </div> <div class="card slide-item"> <img src="https://picsum.photos/400/300?random=4" class="card-img-top" alt="Slide 4"> <div class="card-body"> <h5 class="card-title">Başlık 4</h5> <p class="card-text">Bu, dördüncü slaytın açıklamasıdır.</p> </div> </div> <div class="card slide-item"> <img src="https://picsum.photos/400/300?random=5" class="card-img-top" alt="Slide 5"> <div class="card-body"> <h5 class="card-title">Başlık 5</h5> <p class="card-text">Bu, beşinci slaytın açıklamasıdır.</p> </div> </div> <div class="card slide-item"> <img src="https://picsum.photos/400/300?random=6" class="card-img-top" alt="Slide 6"> <div class="card-body"> <h5 class="card-title">Başlık 6</h5> <p class="card-text">Bu, altıncı slaytın açıklamasıdır.</p> </div> </div> </div> </div> </div> </div> |
⚙️ Başlatma Script’i
1 2 3 4 5 | <script> $('#slick1').slick(); </script> |
📌 Not: Bu JavaScript kodunu </body> etiketinden hemen önce yerleştirmeyi unutmayın.
Tüm kodları doğru şekilde yazdığınızda aşağıdaki gibi bir görüntü karşılayacaktır.
🦉 Owl Carousel 2’ye Giriş
Sıradaki eklentimiz Owl Carousel 2. Web sitelerinde sıklıkla kullanılan, modern ve esnek bir slider (kaydırıcı) eklentisidir. Özellikle mobil uyumlu yapısı, özelleştirilebilir kontrolleri ve hafifliği sayesinde birçok projede tercih edilir.
Slick Carousel ile benzer şekilde çalışsa da, Owl Carousel kendi API yapısına ve sınıf kullanımına sahiptir. Kullanımı oldukça kolaydır ve temel birkaç adımla hızlıca entegre edilebilir.
Şimdi Owl Carousel’ü projeye nasıl dahil edeceğimize adım adım bakalım.
🔧 Owl Carousel Kurulumuna Başlarken
Owl Carousel 2’yi projemize dahil etmek için öncelikle resmi dökümantasyon sayfasına göz atmamız gerekiyor. Resmi web sitesi:
👉 https://owlcarousel2.github.io/OwlCarousel2/
Bu sayfa üzerinden eklentinin nasıl çalıştığını, örnekleri ve kullanım detaylarını inceleyebilirsiniz.
Not: Eğer bu bağlantıya erişemiyorsanız (örneğin MEB ağı üzerinden erişim kısıtlıysa), alternatif olarak GitHub sayfasını kullanabilirsiniz:
👉 https://github.com/OwlCarousel2/OwlCarousel2
Her iki kaynak da Owl Carousel 2’yi projeye eklemek ve örnekleri görmek için yeterli bilgiyi sunar.
İşte Owl Carousel 2 için CDN bağlantıları ve Bootstrap iskeletiyle oluşturulmuş temel bir proje başlangıç yapısı:
🧱 Owl Carousel 2 – CDN ve Bootstrap İskeleti
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!doctype html> <html lang="tr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Owl Carousel 2 Kullanımı</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous"> <!-- Owl Carousel CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/assets/owl.carousel.min.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/assets/owl.theme.default.min.css"/> </head> <body> <!-- Buraya carousel HTML içeriği eklenecek --> <!-- jQuery (Owl Carousel için gereklidir) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Owl Carousel JS --> <script src="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/owl.carousel.min.js"></script> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script> </body> </html> |
İşte GitHub’daki usage bölümündeki örnek HTML içeriği ve başlatma script’iyle hazırlanmış tam bir Owl Carousel örneği:
📄 Owl Carousel HTML İçeriği ve Başlatma Kodu
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!doctype html> <html lang="tr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Owl Carousel 2 Kullanımı</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Owl Carousel CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/assets/owl.carousel.min.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/assets/owl.theme.default.min.css"/> </head> <body> <!-- Owl Carousel Örneği --> <div class="container mt-5"> <h2 class="text-center mb-4">Owl Carousel Örneği</h2> <div class="owl-carousel owl-theme"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> </div> </div> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Owl Carousel JS --> <script src="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/owl.carousel.min.js"></script> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"></script> <!-- Owl Carousel Başlatma --> <script> $(document).ready(function(){ $('.owl-carousel').owlCarousel(); }); </script> </body> </html> |
İşte https://picsum.photos ile rastgele görseller kullanarak .card yapısıyla hazırlanmış 6 öğelik Owl Carousel örneği:
🖼️ Owl Carousel + Bootstrap Card Örneği
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <!doctype html> <html lang="tr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Owl Carousel 2 Kullanımı</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Owl Carousel CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/assets/owl.carousel.min.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/assets/owl.theme.default.min.css"/> </head> <body> <!-- Owl Carousel Örneği --> <div class="container mt-5"> <h2 class="text-center mb-4">Owl Carousel – Kart Örneği</h2> <div class="owl-carousel owl-theme"> <!-- Kart 1 --> <div class="card"> <img src="https://picsum.photos/400/300?random=1" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Başlık 1</h5> <p class="card-text">Bu kart, Owl Carousel içerisinde gösterilen bir öğedir.</p> </div> </div> <!-- Kart 2 --> <div class="card"> <img src="https://picsum.photos/400/300?random=2" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Başlık 2</h5> <p class="card-text">Bu kart, Owl Carousel içerisinde gösterilen bir öğedir.</p> </div> </div> <!-- Kart 3 --> <div class="card"> <img src="https://picsum.photos/400/300?random=3" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Başlık 3</h5> <p class="card-text">Bu kart, Owl Carousel içerisinde gösterilen bir öğedir.</p> </div> </div> <!-- Kart 4 --> <div class="card"> <img src="https://picsum.photos/400/300?random=4" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Başlık 4</h5> <p class="card-text">Bu kart, Owl Carousel içerisinde gösterilen bir öğedir.</p> </div> </div> <!-- Kart 5 --> <div class="card"> <img src="https://picsum.photos/400/300?random=5" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Başlık 5</h5> <p class="card-text">Bu kart, Owl Carousel içerisinde gösterilen bir öğedir.</p> </div> </div> <!-- Kart 6 --> <div class="card"> <img src="https://picsum.photos/400/300?random=6" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Başlık 6</h5> <p class="card-text">Bu kart, Owl Carousel içerisinde gösterilen bir öğedir.</p> </div> </div> </div> </div> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Owl Carousel JS --> <script src="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/owl.carousel.min.js"></script> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"></script> <!-- Owl Carousel Başlatma --> <script> $('.owl-carousel').owlCarousel(); </script> </body> </html> |
Basit bir şekilde Owl Carousel’i oluşturarak çalıştırdık. Eğer daha gelişmiş bir yapı isterseniz, aşağıdaki yapılandırma kodunu kullanarak carousel’e farklı özellikler ekleyebilirsiniz:
Not: Carousel’in daha düzgün görünmesi ve farklı ekran boyutlarında uyumlu çalışması için aşağıdaki JavaScript yapılandırmasını eklemeniz önerilir:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script> $(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop: true, // Sonsuz döngü aktif margin: 10, // Öğeler arası boşluk nav: true, // Önceki/sonraki oklar dots: true, // Alt kısımdaki küçük navigasyon noktaları responsive: { 0: { items: 1 }, 576: { items: 2 }, 768: { items: 3 }, 992: { items: 4 } } }); }); </script> |
Daha fazla özelleştirme yapmak isterseniz, aşağıdaki ek ayarları da kullanmanızı tavsiye ederim:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $('.owl-carousel').owlCarousel({ items: 4, // Aynı anda gösterilecek öğe sayısı loop: true, // Sonsuz döngü margin: 10, // Öğeler arası boşluk nav: true, // Navigasyon okları dots: true, // Alt noktalar (pagination) autoplay: true, // Otomatik oynatma autoplayTimeout: 3000, // Geçiş süresi (ms) autoplayHoverPause: true, // Fareyle üzerine gelince duraklat responsive: { 0: { items: 1 }, 576: { items: 2 }, 768: { items: 3 }, 992: { items: 4 } } }); |
Bu ayarlarla Owl Carousel’inizi hem daha işlevsel hem de kullanıcı dostu hale getirebilirsiniz.
Sonuç
Sonuç olarak, bu yazıda hem Slick Carousel hem de Owl Carousel 2 eklentilerinin temel kullanımını, kurulum adımlarını ve örnek uygulamalarını detaylı bir şekilde inceledik. Her iki eklenti de modern web projelerinde içerikleri görsel olarak çekici hale getirmek için etkili araçlardır. Projenizin ihtiyaçlarına göre doğru yapılandırma ile bu araçları kullanarak kullanıcı deneyimini iyileştirebilir, sitenize dinamik ve estetik bir dokunuş katabilirsiniz.
Yorum Yap