Jquery Carousel

Ç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

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

<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

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

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

.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

1

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

Burda ara