Owl Carousel 2 Nedir Ve Nasıl Kullanılır ?
İçindekiler
Belirli bir düzey html kodlama ( programlama ) bilgisine sahipseniz ve sitenizde resim geçişi ( slider ) oluşturmak istiyorsanız işte aradığınız kütüphane. Yazımızda Owl carousel 2 nedir ve nasıl kullanılır kısaca örneklerle anlatmaya çalıştık. İlginizi çekmiş ise yazıya hemen başlayalım.
Owl Carousel 2 Nedir?
Owl Carousel 2 web siteleri için geliştirilmiş slider ( kayan resimler ) oluşturmamızı sağlayan bir kütüphanedir. Bu kütüphane sayesinde bir çok slider türünü basit bir şekilde oluşturabilirsiniz. Genel özelliklerine değinecek olursak bu slider sisteminin öne çıkan özellikleri telefon ve tablet gibi sistemler için kaydırma işlemleri yapabilme, bir çok tarayıcıya uyumlu çalışmasıdır. Hatta eski tarayıcılarla bile çalışacağı belirtiliyor. Ayrıca Responsive dediğimiz telefon tablet ve masaüstü bilgisayarlar için ekran çözünürlüklerine göre boyutlandırabilme özelliği bulunması öne çıkan özelliklerinden. Owl Carousel 2 nedir kavramını açıkladığımıza göre web sitemizde nasıl kullanabileceğimizden de biraz bahsedelim.
Owl Carousel 2 Nasıl Kullanılır ?
Nasıl kullanılacağını anlatmaya önce kütüphanenin web sitesine girerek başlayalım. https://owlcarousel2.github.io/OwlCarousel2/ siteye girdiğimizde sayfanın sağ üst köşesinde bulunan yükleme butonu ile owlcarousel 2 nin web sitemizde çalışabilmesi için gerekli olan dosyalara ulaşabiliriz.Bu dosyada bizim için en gerekli olan bölüm dist klasörüdür. Bu klasörün içinde bu slider için gerekli olan jquery hariç tüm dosyalara ulaşacağız. Dist klasörünü sitemizin alt klasörüne ekledikten sonra bu slider i kullanacağımız siteyi bir html editörü ile açıp bu kütüphaneyi sitemize tanıtmaya başlayabiliriz. Her zaman olduğu gibi ilk önce <head> </head> etiketleri arasına aşağıdaki kodları ekliyoruz. Ben dist altında bulunan assents klasörü olarak linkleri ayarladım siz isterseniz başka bir klasöre yükleyip yollarını ona göre ayarlayabilirsiniz.
<link rel=“stylesheet” href=“dist/assets/owl.carousel.min.css”>
<link rel=“stylesheet” href=“dist/assets/owl.theme.default.min.css”>
- Daha sonra </body> etiketi bitiminin hemen üzerine aşağıdaki kodu ekliyoruz.
<script src=“owlcarousel/owl.carousel.min.js”></script>
- Son olarak jquery-3.4.1.min.js dosyasını da indirip aynı yere aşağıdaki linkle ekliyoruz.
<script src=”jquery-3.4.1.min.js”></script>
sitemizde şu şekilde olmaları gerekiyor.
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="dist/assets/owl.carousel.min.css"> <link rel="stylesheet" href="dist/assets/owl.theme.default.min.css"> </head> <body> <script src="owlcarousel/owl.carousel.min.js"></script> <script src="jquery-3.4.1.min.js"></script> </body> </html>
Artık Owl Carousel 2 kütüphanesini sitemize entegre ettik şimdi sırada örnek bir kod ile nasıl çalışacağına bakalım.
<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 class="owl-item">...</div> </div> </div> </div>
Bu kodu sadece resim geçişleri için kullanabilirsiniz yazan yerlere resim yada yazı ekleyebilirsiniz.
İleri Geri Sekmesi Ekleme
Eğer bu slider de ileri geri butonları ve istediğiniz resmi görüntülemek için noktalar olsun istiyorsanız kod örneğimiz şu şekilde olacaktır.
<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 class="owl-item">...</div> </div> </div> <div class="owl-nav"> <div class="owl-prev">prev</div> <div class="owl-next">next</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>
