Ana SayfaWeb TasarımjQuery Owl Carousel Gelişmiş Responsive Slider Kullanımı

jQuery Owl Carousel Gelişmiş Responsive Slider Kullanımı

YouTube'ta Takip Et →

Mobil cihazlarla uyumlu, responsive ve WordPress sitenize entegre edebileceğiniz bir slider arıyorsanız, jQuery eklentisi olan Owl Carousel slider’ını tavsiye ederim. Carousel özelliğini, işlerinizi sırayla göstermek, referanslarınızı ya da birlikte çalıştığınız firmaların logolarını görüntülemek, hatta testimonals denilen müşteri yorumlarını sırasıyla göstermek için kullanabiliyorsunuz.

Owl Carousel, kullanımı kolay bir eklenti. Özelleştirilebilir olması, dokunmatik desteği, sürükle bırak desteği olması, ileri geri butonları ile slider konusunda yapmak istediğiniz her şeyi yapabileceğiniz özelliklere sahip olması nedeniyle ihtiyacım olduğunda kullandığım bir slider eklentisidir.

jQuery Owl Carousel Nasıl Kullanılır?

WordPress kullanıyorsanız tema dosyalarını düzenleyerek sitenizde kullanabilirsiniz. Birkaç CSS ve JS dosyası ekleyip, slider’ın görünmesini istediğiniz yere de slider kodlarını ekliyoruz. Temel HTML ve CSS bilgisi ile üstesinden gelebilirsiniz. Şimdi adım adım nasıl yapacağımızı görelim.

Önce Owl Carousel web sitesine girip Download butonuna tıklayarak dosyaları indirelim. İndirdiğimiz zip dosyasındaki dist klasörü bizim ilgileneceğimiz klasör. İçinde scriptin çalışması için gerekli JS ve CSS dosyaları bulunuyor.

owlcarousel/
    ├── assets/
    │   ├── owl.carousel.css
    │   ├── owl.carousel.min.css
    │   ├── owl.theme.default.css
    │   ├── owl.theme.default.min.css
    │   ├── owl.theme.green.css
    │   ├── owl.theme.green.min.css
    │   └── owl.video.play.png
    │
├── owl.carousel.js
├── owl.carousel.min.js

Kurulum için ilk aşama head etiketleri arasına aşağıdaki kodları, yollarını düzelterek eklemek. İlk satır mutlaka eklenmesi gereken CSS dosyası. İkincisi ise Owl Carousel’in tema dosyası diyebiliriz. Eklemeseniz de olur.

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

Footer alanına da jQuery dosyasını ve Owl Carousel jQuery’yi ekliyoruz. En sona da kendi scriptlerimizin bulunduğu JS dosyasıbnı ekliyoruz.

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

Scriptin çalışması için gerekli olan HTML kodunu da aşağıda görebilirsiniz. div class=”owl-carousel” altındaki maddeleri otomatik olarak algılayıp onları bir slider’a dönüştürüyor.

<div class="owl-carousel">
  <div>İçerik 1</div>
  <div>İçerik 2</div>
</div>

Son olarak scripts.js dosyasına aşağıdaki kodu yazalım.

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

Owl Carousel’in çalışma mantığı kabaca bu şekilde. Şimdi özelliklerini inceleyerek slider’ı biraz daha geliştireceğiz. Önce, noktaları ve önceki sonraki seçenekleri ile birlikte bu slider’ın sayfada çalışabilecek halini de vereyim size.

<div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
        </div>
    </div>
    <div class="owl-nav">
        <div class="owl-prev">Önceki</div>
        <div class="owl-next">Sonraki</div>
    </div>
    <div class="owl-dots">
        <div class="owl-dot active"><span></span></div>
        <div class="owl-dot"><span></span></div>
        <div class="owl-dot"><span></span></div>
    </div>
</div>

Şimdi de Owl Carousel özelliklerinden bahsedelim. Owl Carousel özelliklerinin tümünün bulunduğu listeye buradan da ulaşabilirsiniz. Hani scripts.js dosyasına bir kod eklemiştik ya, slider özelliklerini de o koda dahil edeceğiz. Örneğin: loop özelliğini ele alalım. Tüm değerlerin bir varsayılan değeri vardır ve yazmadığınızda onlar geçerlidir. loop değerinin varsayılanı false’tur. Fakat aşağıdaki kod ile güncellerseniz slider’daki son görselden sonra ilk görsel görünerek devam edecektir. Diğer özellikleri de aşağıda görebilirsiniz.

$(".owl-carousel").owlCarousel({
    loop:true,
    items:6, // Ekranda kaç nesnenin görüneceği
    nav:true, //İleri geri butonlarının görünmesini sağlar.
    navText:["Geri","İleri"], // İleri geri butonlarını Türkçeleştirmek.
    autoplay:true, // Slider otomatik olarak hareket eder.
    mouseDrag:false, // Fare ile sürükleme yapamazsınız.
    touchDrag:false, // Dokunmatik ekranlarda tokunarak sürükleme yapamazsınız.
});

Bir de slider’ın responsive tarafına bakalım. Ekrana göre slider özelliklerini değiştirebiliyorsunbuz. Örneğin; masaüstünde 6 adet görünen öğeler, tabletlerde 3 öğe, telefonlarda 1 öğe şeklinde görünsün isterseniz aşağıdaki örneği inceleyebilirsiniz.

$(".owl-carousel").owlCarousel({
    loop:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:6
        }
    }
});

Kendi sitelerindeki demoları inceleyin mutlaka. Farklı kullanımların nasıl olduğunu görebilirsiniz böylelikle.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.