Blog Kategorileri

Son Eklenen Konular

Jquery Carousel
Resim

Merhaba yazmış olduğum bu uygulama ile sağa, sola, Aşağı, Yukarı şeklinde kayan içerikler oluşturmanız mümkün.

Çalışma mantığı çok basit  sondaki öğeyi alıp baştarafa getiriyor tabiki bu işlemleri animasyonlu bir şekilde uyguluyor kes, yapıştır şeklinde.

Oluşturacağınız içeriğin otomatik hareket edip etmemeisini, kullanıcı müdahale ettiğinde otomatik hareketinin devre dışı kalıp kalmamasını ayarlayabildiğiniz gibi otomatik olarak sağa veya sola, aşağıya veya yukarıya kaymasını da ayarlayabiliyorsunuz.

Otomatik hareket edeceği zaman duraklama süresini kendiniz belirliyor ve akış eyleminin kaç mili saniyede olucağınıda ayarlayabiliyorsunuz.

Yukardaki belirttiğim özelliklerin default ayarları aşşağıdaki gibi

javascript

var defaults = {
			'ileriButton' : '.ileri',
			'geriButton' : '.geri',
			'akistipi' : 'h', /*v dikey, h yatay*/
			'otomatik' : true,
			'otomatikKapat' : true, /*kullaninici eylemlerinde otomatik hareketi devre disi birak*/
			'duraklamaSn' : 2000,
			'gecisSn'  : 400,
			'netarafa' : 1
		}


Bir div içerisinde ul ve li tagları ile oluşan HTML yapısı şu şekilde

html

<div class="kaykay">
   <div class="mavitmCalrusel">
      <ul class="mavitmKaykay">
          <li><img src="resim/1.jpg" alt="" /></li>
          <li><img src="resim/2.jpg" alt="" /></li>
          <li><img src="resim/3.jpg" alt="" /></li>
          <li><img src="resim/4.jpg" alt="" /></li>
          <li><img src="resim/5.jpg" alt="" /></li>
          <li><img src="resim/6.jpg" alt="" /></li>
          <li><img src="resim/8.jpg" alt="" /></li>
          <li><img src="resim/9.jpg" alt="" /></li> 
      </ul>
    </div>
    <div class="geri"></div>
    <div class="ileri"></div>
</div>

Yukardaki html kodlarına hayat vermek hareketlendirmek için şu şekilde uygulayabilirsiniz

javascript

$(".mavitmCalrusel").mavitmCarusel();

Yukardaki HTML örneği için küçük bir stilleme örneği

css

.kaykay{width:930px; height:160px; padding:10px; background-color:#ebebeb; border:1px solid #CCC; position:relative; margin-left:50px;}
.mavitmCalrusel{width:930px; height:160px; overflow:hidden;}
.mavitmKaykay{list-style:none; margin:0px; padding:0px; width:930px; height:160px; }
.mavitmKaykay li{ width:300px;  height:160px; padding:5px; float:left;}
.mavitmKaykay li img{width:300px; min-height:160px;}
.kaykay .ileri{width:48px; height:48px; background:url(images/caruselarraows.png) no-repeat bottom right; position:absolute; top:40%; left:-47px; cursor:pointer;}
.kaykay .geri{width:48px; height:48px; background:url(images/caruselarraows.png) no-repeat top left; position:absolute; top:40%; right:-47px; cursor:pointer;}

css içerisinde bulunan arka plan resmi

 

 

Bazı parametrelerinin kullanımı hakkında kısaca bilgi vereyim:
akistipi : v (vertical) olarak belirttiğimizde Yukarı ve aşağı hareket etmesini istediğimizi belirtiyoruz. akistipi v ve otomatik true ise netarafa değeri  1 ise aşağı, 0ise yukarı şeklinde kendince otomatik hareket edecektir
aynı şekilde akistipi : h olarak belirttiğimizdede sol veya sağ kaymasını belirtip netarafa seçimi ilede otomatik akısş yönünü belirtiyoruz

 

Örnek uygulama sayfası için buraya tıklayıp inceleyebilirsiniz

İndirmek için buraya tıklayın

comments powered by Disqus