05/06/2021

Owl Carousel

Owl Carousel & Responsive Slider

Owl Carousel düzenlenebilir kod yapısına sahip, kolay kullanılabilir, güncellenebilir, hızlı ve ücretsiz bir responsive carousel slider’dır. Jquery kütüphanesi ile birlikte çalışır, yaygın olarak kullanılan birçok tarayıcı ile de uyumludur.

Yön okları kullanılarak, sürükleyip bırakılarak ve otomatik döngü olarak da kullanımları mevcuttur.

Owl Carousel ile Uyumlu Tarayıcılar ve Cihazlar

  • Google Chrome
  • Mozilla Firefox
  • Opera
  • IE7/8/10/11
  • iPad Safari
  • iPod4 Safari
  • Nexus 7 Chrome
  • Galaxy S4
  • Nokia 8s Windows8

Owl Carousel Kurulumu

Owl Carousel CSS ve Javascript kodlarının Jquery kodları ile birlikte HTML web sayfasına eklenmesi gerekmektedir.

CSS Kodları

<head></head> etiketlerinin içerisine aşağıdaki CSS kodlarını ekleyin.

<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">

CSS kodlarını tasarlanan proje ile aynı yerde barındırabilir veya https://owlcarousel2.github.io/OwlCarousel2/ adresi üzerinden de aşağıdaki kodları ekleyerek çağırabilirsiniz.

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

Not: CSS kodlarının dışarıdan çağrılması performans açısından dezavantaj oluşturacağından dolayı proje ile aynı depolama alanından çağrılması daha doğru olur.

Javascript Kodları

Owl Carousel’in çalışmasını sağlayan Javascript kodlarını <body></body> etiketleri kapandıktan sonraki alana ekleyin.

Not: Bu kodlar sayfanın herhangi bir alanına eklendiğinde de çalışır fakat <script></script> kodlarını sayfanın altına eklemek site hızı açısından daha avantajlı olacaktır.

<script src="jquery.min.js"></script>
<script src="owl.carousel.js"></script>

Javascript kodlarını da CSS kodları gibi dışarıdan çağırabilirsiniz. Ya da tasarlanan proje ile aynı dosya içerisinde de tutabilirsiniz. Aşağıdaki kullanım ile Owl Carousel Slider için gerekli Javascript kodları https://owlcarousel2.github.io/OwlCarousel2/ üzerinden çağırabilirsiniz.

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

Owl Carousel’i döngü ayarları, yön tuşları ve ekran boyutlarına göre kaç öğe görüneceği gibi ayarlamaların yapılacağı aşağıdaki Javascript kütüphanesini ekleyin.

<script>
   var owl = $('.owl-carousel');
   owl.owlCarousel({
       margin: 10,
       loop: true,
       responsive: {
         0: {
           items: 1
         },
         600: {
           items: 2
         },
         1000: {
           items: 3
         }
        }
       })
</script>

Not: Bu kodlar jquery.min.js ve owl.carousel.js kodlarının altında bulunmalıdır diğer durumlarda Owl Carousel çalışmayacaktır.

HTML Kodları

Aşağıdaki kodlar ile Owl Carousel’in en sade (yön tuşları ve slide noktaları olmadan) halini kullanabilirsiniz.

Kaynakça:

https://owlcarousel2.github.io/OwlCarousel2/