HHTML

Owl Carousel 2 Kullanımı

  • 9 Aralık 2020
  • 593 görüntüleme
  • 2 yorum
  • 3 dk okuma süresi
Popüler slider kütüphanelerinden birisi olan Owl Carousel 2 kullanımından bahsettim. Kurulumu, kullanımı ve basitçe yapı anlatılmıştır.
0
Shares
0
0
0
0
0
0
0

Merhabalar,

Bu yazımda popüler slider kütüphanelerinden birisi olan Owl Carousel 2 kullanımından bahsedeceğim. Sade bir şekilde kurulumunu yapıp basitçe yapıyı anladıktan sonra kendi sitesinden örnekleri bu linkten inceleyebilirsiniz.

Öncelikle sitemize CDN olarak uzaktan dosyaları çağırabiliriz bu işlem kolaylık ve site hızınız için en iyi çözümdür. CDN bağlantı linkine tıklayarak Owl Carousel’ in dosya linklerine ulaşabilirsiniz. Gerekli ve istediğiniz dosyaların kaynak bağlantılarını kopyalayıp sitenize çağırabilirsiniz.

Dosyaları indirip kendi sunucunuz üzerinden çağırmak istiyorsanız Owl Carousel sitesini ziyaret edip sağ üst köşede yer alan Download linkine tıklamanız yeterli olacaktır. Size verilen zip dosyası içerisindeki dist klasörü içerisinden size lazım olan kaynak dosyalara ulaşabilirsiniz. Bu dosyaları site dizininize atarak daha sonra dosya dizinini ve adını yazarak yine sitenize çağırabilirsiniz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Owl Carousel Kullanımı</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>
<body>

    <div class="owl-carousel">
      <div> <img src="gorsel1.jpg" /> </div>
      <div> <img src="gorsel2.jpg" /> </div>
      <div> <img src="gorsel3.jpg" /> </div>
      <div> <p>İçerik</p> </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script>
    $(document).ready(function(){
      $('.owl-carousel').owlCarousel();
    });
    </script>
</body>
</html>

En sade şekilde yukarıdaki örnekteki gibi kolaylıkla owl carousel’ inizi çalıştırabilirsiniz. Kısaca özetleyecek olursak;

  1. Owl Carousel, Jquery ile çalışmaktadır. Bunun için Owl Carousel’ in js dosyasından önce Jquery dosyasını çağırmamız gerekiyor.
  2. Owl Css dosyasını head etiketi arasına, js dosyasını body etiketinin kapanışından hemen öncesinde çağırıyoruz.
  3. Bir Javascript dosyasına veya script etiketi arasına Jquery ile sitemiz hazır olduğunda çalışan fonksiyon içerisine “owl-carousel” class’ ına sahip olan elementi çalıştırıyoruz. Class seçicisinden sonra owlCarousel() fonksiyonu geri kalan işlemi yapacaktır. İsterseniz içine süslü parantezler ile özellikleri de tanımlayabilirsiniz örn: ({ }) olarak.

Şimdi aşağıda en popüler ve sık kullanabileceğini özelliklerden bazılarını ve örnek kaynak kodlarına ulaşabileceğiniz Owl Carousel 2′ nin özelliklerden bazılarını paylacaşağım.

  • loop:true özelliği sliderı döngüye sokar. Böylelikle son elemana geldikten sonra başa tekrar döndürür. true değerini false yaptığınız zaman ise tam tersine dönüp döngü özelliğini iptal eder. Son elamana geldikten sonra ileriye devam ettirmez.
  • margin:10 özelliği ise slider içindeki öğelerin birbirleri arasındaki dış boşluğunu ayarlar. 10 değeri örnek olarak verilmiştir kaç piksel istiyorsanız o değeri girmeniz yeterli olacaktır.
  • autoWidth:true özelliği slider içindeki öğelerin kendi genişliğini otomatik olarak almasını sağlar. Her kutu otomatik olarak genişlik alır. Varsayılan olarak false değerini taşır. Detay
  • autoHeight:true özelliği slider içindeki öğelerin kendi yüksekliğini otomatik olarak almasını sağlar. Her kutu otomatik olarak yükseklik alır. Varsayılan olarak false değerini taşır. Detay
  • autoplay:true özelliği de carousel’ in otomatik olarak çalışmasını sağlar. Varsayılan değeri false olmaktadır. Çalıştırmak için true yazmanız gerekmektedir. autoplayTimeout:1000 değeri autoplay:true iken çalışır. ms üzerinden değer verdiğinizde verdiğiniz değer süresiyle çalışır. 1000 = 1 saniye olarak belirlenir. Kaç saniyede bir çalışmak istiyorsanız ms değerini belirtebilirsiniz. autoplayHoverPause:true değeri de autoplay:true iken çalışır. Mouse ile sliderın üzerine gelindiği zaman durdurmayı sağlar. Varsayılan değeri false olmaktadır. Detay
  • center: true eklediğimiz zaman ise slider öğeleri ortalı bir şekilde sunulur. Çoklu sliderı ortalamak istediğimizde bu özelliği kullanırız. Döngü olan ve döngü olmayan örnekleri sitesinde mevcuttur. Detay
  • stagePadding: 50 özelliği de dış owl kapsayıcısına içeriden boşluk (padding) vermemizi sağlar. Varsayılan olarak 0 yani herhangi bir boşluk yoktur. 50 değerini ne kadar piksel boşluk vermek isterseniz ona göre güncelliyorsunuz. Detay
  • responsive özelliği de çoklu öğelerinizi ekran genişliğine göre kaç tane göstermek istediğiniz zaman yardımcı olur. Oldukça kullanışlı olmasıyla birlikte kullanımı da oldukça kolaydır. Belirttiğiniz ekran genişlik değeri altında kaç adet öğe göstermek isterseniz items: Sayı alanına istediğiniz rakamı girebilirsiniz. Detay butonuna tıkladığınızda çalışma mantığını daha iyi anlayacaksınız. Detay

Owl Carousel oldukça kullanışlı bir kütüphanedir. Çoklu veya tekli öğelerinizi slider olarak sunmanız gerektiğinde size oldukça kolaylık sağlar. Kendi sitelerinde de gerekli ve net dökümanı vardır. Özelliklerinizi türkçe olarak açıklamaya çalıştım. Owl Carousel’ in her zaman işinize yarayacağını düşünüyorum 

Mutlu kodlamalar 🙂

0 Shares:
0
0
0
0
0
0
2 comments

  1. teşekkürler hep takıldığım bir konuydu sayenizde owl-carousel in kullanımını öğrenmiş oldum

    Yanıtla

Benimle yorumunu paylaş;

— Önceki Yazı

Form Mail Gönderimi

Sonraki Yazı —

Yazılanı Anlık Yerleştirme

Bunlara da göz atabilirsin