Jquery Dokunmatik Kaydırmalı Responsive Slider - Owl Carousel
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Dokunmatik Kaydırmalı Responsive Slider - Owl Carousel

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(4024)
RAPOR ET
Bu dersimizde jquery pluginlerinden owl carousel adlı bir slideri tanıtacam.Owl carousel tutup sürükleme ile çalışan bir slider.Günümüzde akkıllı telefonlar ve tabletler herkeste mevcut.Bu akıllı telefonlarda genelde çoğu şey tutup sürükleme ile çalışır.Mobil site tasarlarken bunlara göre tasarlamak önemlidir.Kullanıcının hızlı ve kolay bir şekilde gezineceği bir site olması için.Bu derstede mobil sitelerimize koyabileceğimiz responsive destekli slideri işleyeceğiz.Aşağıdaki örneği mouse ile tutup sürükleyebilirsiniz.Mobil cihazınız ile girip parmağınızla sürükleyip bırakabilirsiniz.

İncele : http://ustaderslik.com/ornek/owl%20carousel/

İndir : http://ustaderslik.com/dosya/owl%20carousel.zip

Slider 2 kısma ayrılığı tek resimli büyük slider ve ufak 4-5-6 gibi resimlerden oluşan slider.Sliderin html kısmında kapsayıcı bir div oluşturup içine divler içinde img ler koyarız.Jquery kısmında da kapsayıcı divi seçip
$("#slider").owlCarousel()

pluginimizi uygularız.Dosyaları örneği indirerek ulaşabilirsiniz.Parametreleri örnek üzerinde anlattım.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<link rel="stylesheet" href="owl.carousel.css" />
<link rel="stylesheet" href="owl.theme.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="owl.carousel.min.js"></script>
<script type="text/javascript">
$(function(){
$("#slider").owlCarousel({
navigation :false,//ileri geri butonları açıp kapatmak için
slideSpeed :500,//sürükle bırak animasyon süresi
paginationSpeed :500,//butonlarla ileri geri animasyon süresi
singleItem:true,//büyük boyutlu slideri aktif etmek için.
autoHeight : true //otomatik yüksek alması için.
});

$("#slider2").owlCarousel({
autoPlay:1500, //otomatik yenilenmesi için
items :6,//başlangıç item sayısı
itemsDesktop : [1199,4],//boyut değişirse 1199px altı ise boyut 4 item olsun
itemsDesktopSmall : [979,2]//979 altı ise 2 tane olsun
});
})
</script>
<style type="text/css">
#slider,#slider .item{width:100% !important;height:400px;margin:auto;}
#slider div img{display:block;width:100% !important;height:400px;}

#slider2{width:%100;height:100px;margin:auto;}
#slider2 .item img{display:block;width:100% !important;height:200px !important;}
#slider2 .item{background:#3fbf79;margin:5px;}
</style>
</head>
<body>

<div id="slider" class="owl-carousel">
<div> <img src="resim.jpg" /> </div>
<div> <img src="resim.jpg" /> </div>
<div> <img src="resim.jpg" /> </div>
<div> <img src="resim.jpg" /> </div>
<div> <img src="resim.jpg" /> </div>
<div> <img src="resim.jpg" /> </div>
<div> <img src="resim.jpg" /> </div>
<div> <img src="resim.jpg" /> </div>
<div> <img src="resim.jpg" /> </div>
<div> <img src="resim.jpg" /> </div>
<div> <img src="resim.jpg" /> </div>
</div>

<br /><br />

<div id="slider2">
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
<div class="item"> <img src="zombie.png" /> </div>
</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/sd4f1df411.png




TurkuazTR
TurkuazTR 3 Yıl Önce Cevaplandı
sağol



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol