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

By Admin
29/Mayıs/2020
Okuma Süresi: 3 dk.

1- şu sitedeki yönergeler ve kodlar takip edilecek; https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html
2- css ve js dosyalarını nasıl sayfamıza ekleyeceğimizi anlatmış;
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

buradaki hrefler ve srcler haliyle kendi sitesindekiler olduğu için bizde çalışmayacak. bunların cdnleri lazım. hazırlayıp aşağı yapıştırıyom buradan alırım artık;
<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">
<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>

yukarıdaki js dosyalarını body etiketinin kapanışının bir üstüne yapıştırabiliriz. cssler zaten head tagında olacak.

3- body içerisinde slider ile ilgili html kodlarımızı yapıştıracaz;
<div class="owl-carousel">
<div><img src="https://via.placeholder.com/400x200" alt=""> Your Content </div>
<div><img src="https://via.placeholder.com/400x200" alt=""> Your Content </div>
<div><img src="https://via.placeholder.com/400x200" alt=""> Your Content </div>
<div><img src="https://via.placeholder.com/400x200" alt=""> Your Content </div>
<div><img src="https://via.placeholder.com/400x200" alt=""> Your Content </div>
<div><img src="https://via.placeholder.com/400x200" alt=""> Your Content </div>
</div>

4- yine body etiketinin en altına uygun bi yere şu js kodlarını yapıştıracaz;
<script>
$('.owl-carousel').owlCarousel({
items:1,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000
});
</script>

burada owl-carousel classını seçiyoruz ki zaten divin classını öyle seçmiştik. başka bir isim de verebilirdik o dive. sonrasında owlCarousel metodunu çalıştırıyoruz. item: 1 dediği sayfada kaç adet resim görünsün yani 2 yaparsak aynı anda 2 resim sığar sayfaya.
loop: true demek slide bittiğinde devam edip başa sarar. döngü yani.
margin, autoPlay ve timeout zaten bildiğin şeyler.

5- diğer özellikler için demos linkine tıklanabilir.


Tema parçalarken dikkat edilmesi gereken detaylar
Codeigniter 3'de Arama Sonuçlarının Pagination ile Gösterilmesi