Jquery Harika Slider OWL Carousel

Merhaba arkadaşlar artık buradan sizlere kısa kısa notlar halinde kullanışlı web araçlarını tanıtacağım. Bugün tanıtacağım bir jquery tabanlı . Hemen biz bunları biliyoruz demeyin oldukça fazla özelliğe sahip olan bu mit lisansı ile lisanslanmış yani kullanımı ücretsiz.

slider

OWL Carousel Bazı Özellikleri

  • Dokunmatik desteği yani mobil cihazlarla uyumlu
  • Sürükle bırak desteği
  • Bir sayfada birden farklı türde örneği çalıştırabilme
  • ileri – geri butonları
  • Özelleştirilebilir animasyonlar ve çeşitleri
  • CSS 3D desteği
  • Bir den çok seçenek çeşidi.

Eklentiyi indirmek için tıklayınız

 

Neyse laf kalabalığı yapmadan örneklere ve kullanıma geçelim

Nasıl Kullanılır

Css  ve Js dosyaları yükleniyor

<!-- Önemli Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- Varsayılan tema -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>

<!-- js eklentisini ekliyoruz -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

Html ayarları eklenecek içerikler

<div id="owl-example" class="owl-carousel">
  <div> İçerik (yazı resim vs) </div>
  <div> İçerik (yazı resim vs)  </div>
  <div> İçerik (yazı resim vs)  </div>
  <div> İçerik (yazı resim vs)  </div>
</div>

Son olarak tanımladığımız eklentiyi çağırıyoruz

$(document).ready(function() {
 
  $("#owl-example").owlCarousel();
 
});

Burada yapılmış demolara bakabilirsiniz
http://owlgraphic.com/owlcarousel/#more-demos

5,948 total views, 13 views today

(Visited 868 times, 129 visits today)

Volkan Koç

Visual Studio c#.net , Visual Basic. Net , Html , php , action script 3 dillerini biliyor. Kişiye özgü takip , otomasyon , muhasebe , stok takip programları yazılır. İletişim :volkankoc2000@gmail.com

More Posts - Website

Follow Me:
TwitterFacebook

You may also like...