Bu örneğimizde JQuery’nin Owl Carousel eklentisini kullanarak slider oluştaracağız.
Owl Carousel’in sayfasından dosyalarını indiriyoruz. https://owlcarousel2.github.io/OwlCarousel2/
Çalıştığımız klasörün içerisine kullanacağımız dosyaları ekliyoruz. Ağaç yapısı şu şekilde olacaktır;
HTML: Çalışma sayfamıza JQuery ve Owl Carousel’in dosyalarını entegre ediyoruz. Kendi JavaScirpt dosyamızı en son bağlamaya dikkat ediyoruz.
|
1 2 3 4 |
<link href="eklenti/owlCarousel/assets/owl.carousel.min.css" rel="stylesheet"> <link href="eklenti/owlCarousel/assets/owl.theme.default.min.css" rel="stylesheet"> |
|
1 2 3 4 5 |
<a href="http://js/jquery-1.11.1.min.js">http://js/jquery-1.11.1.min.js</a> <a href="http://eklenti/owlCarousel/owl.carousel.min.js">http://eklenti/owlCarousel/owl.carousel.min.js</a> <a href="http://js/script.js">http://js/script.js</a> |
Slider’ı oluşturmak için ilk olarak kapsayıcı bir div açıyoruz. Kapsayıcı dive ‘owl-carousel’ ve ‘owl-theme’ classlarını vererek kendi JavaScript dosyasından özelliklerini çekiyoruz. Kapsayıcı divin içerisinde resimler için her bir resim için div açıyoruz. Div yerine ‘img’, ‘span’, ‘a’ gibi etiketleri de kullanabiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="owl-carousel owl-theme"> <div class="item"><img src="galeri/img.png" /></div> <div class="item"><img src="galeri/img.png" /></div> <div class="item"><img src="galeri/img.png" /></div> <div class="item"><img src="galeri/img.png" /></div> <div class="item"><img src="galeri/img.png" /></div> <div class="item"><img src="galeri/img.png" /></div> <div class="item"><img src="galeri/img.png" /></div> <div class="item"><img src="galeri/img.png" /></div> </div> |
JQUERY: Kurucu fonksiyonun içerisine kodlarımızı yazıyoruz. Slider oluşturmak için ilk olarak oluşturduğumuz div’in class’ını seçiyoruz ve carousel olayını atıyoruz.
|
1 2 3 4 5 |
$(function(){ $(".owl-carousel").owlCarousel(); }); |
Şimdi Owl Carousel’in bazı özelliklerini deneyelim. İlk olarak deneyeceğimiz özellik ‘loop’ özelliğini deneyeceğiz. Varsayılan değeri ‘false’ tur. Değeri ‘true’ yaptığımızda slider sonsuz döngüye döner. Yani son fotoğraftan sonra ilk fotoğrafa geri dönülür.
|
1 2 3 4 5 6 7 |
$(function(){ $(".owl-carousel").owlCarousel({ loop:true }); }); |
Fotoğraflar arasındaki boşluklar varsayılan olarak 0px’dir. Bunu değiştirmek için css’te kullandığımız gibi ‘margin’ kullanıyoruz.
|
1 2 3 4 5 6 7 8 |
$(function(){ $(".owl-carousel").owlCarousel({ loop:true, margin:10 }); }); |
Şuan oluşturduğumuz slider’da yön tuşları varsayılan olarak ‘false’ değerindedir. Bunu değiştirmek için ‘nav’ kullanıp değerini ‘true’ yapıyoruz. Lakin bunu yaptığımızda içerisindeki yazılar İngilizce olarak gelecektir. Bunu değiştirmek için ‘navText’ kullanıyoruz.
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ $(".owl-carousel").owlCarousel({ loop:true, margin:10, nav:true, navText:["geri","ileri"] }); }); |
Slider’ı otomatik olarak hareket ettirmek için ‘autoPlay’ kullanılır. Değerini ‘true’ yaptığımızda slider belirli bir süreden sonra hareket edecektir.
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ $(".owl-carousel").owlCarousel({ loop:true, margin:10, nav:true, navText:["geri","ileri"], autoplay:true }); }); |
Slider’ı mobil cihazlara, tabletlere göre ayarlamak için ise ‘responsive’ özelliğini kullanıyoruz. 0 ve 600 px aralığında çözünürlüğü olan ekranlarda 1 resim,600 ve 1000px aralığında çözünürlüğü olan ekranlarda 2 resim, 1000px ve üzerinde çözünürlüğü olan ekranlarda ise 4 resim görüntülenecek şekilde ayarlıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(function(){ $(".owl-carousel").owlCarousel({ loop:true, margin:10, nav:true, navText:["geri","ileri"], autoplay:true, responsive:{ 0:{ items:1 }, 600:{ items:2 }, 1000:{ items:4 } } }); }); |
Daha çok Owl Carousel özelliğine şu linkten ulaşabilirsiniz;
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
