Owl Carousel2 ( Slider ) Kullanımı
18 Nisan 2024 / 10:09
Burak
Merhabalar,
OwlCarousel slider kullanımı için öncelikle aşağıdaki js ve css kütüphanelerini siteye ekliyoruz.
|
1 2 3 4 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> |
Kullanım Yapısı ( Html Tarafı )
|
1 2 3 4 5 6 7 8 9 |
<div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> </div> |
Jquery Tarafı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script> $(document).ready(function () { var genislik = screen.width; if (genislik > 760) { $(".owl-carousel").owlCarousel({ items: 6, loop: true, margin: 10, autoplay: true, autoplayTimeout: 2000, autoplayHoverPause: true, }); } else { $(".owl-carousel").owlCarousel({ items: 2, loop: true, margin: 10, autoplay: true, autoplayTimeout: 2000, autoplayHoverPause: true, }); } }); </script> |
Hepsi bu kadar 🙂 Bol sorgulu günler geçirmeniz dileğiyle.
Bu Yazılarıda Okuyabilirsiniz...
Bir yanıt yazın