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

Mayıs 2019
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.

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.

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

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.

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

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.

Ş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.

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.

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.