Yapay zeka ile geliştirilen, ek kütühane gerektirmeyen (animasyonlar dahil edilmedi), özelleştirilebilir içerik kaydırıcı...
Her slider için gerekli veriler data-* öznitelikleriyle yapılandırılır.
<div id="slide1" class="gykkSlide"
data-auto="true"
data-timer="4500"
data-nav="true"
data-dot="true"
data-lazy="true"
data-loop="true"
data-pause="true"
data-count="1"
data-gap="0"
data-speed="500"
data-ain="fadeIn"
data-aout="fadeOut"
data-aduration="4000"
data-caption="true"
data-cin="slideInDown"
data-cout="slideOutUp"
data-cduration="1000"
data-cdelay="1000">
... ITEMS ...
</div>
.gykkSlide {position: relative;overflow: hidden}
.gykkSlide .dragging {cursor: grabbing;transition: none}
.gykkSlide .gykkSlide-container {display: flex}
.gykkSlide .gykkItem {position:relative;animation-delay:0s;animation-iteration-count:1;animation-fill-mode:forwards}
.gykkSlide .gykkItem:has(.onScreen), .gykkSlide .gykkItem .caption {animation-delay:0.5s;animation-fill-mode:both}
.gykkSlide .gykkItem .caption.hidden {display:none;visibility:hidden;opacity:0}
.gykkSlide .gykkItem.active {left: 0;opacity: 1}
.gykkSlide .gykkItem.previous {left: -100%}
.gykkSlide img {display: block;width: 100%;height: auto;}
.gykkSlide .gykkSlide-navs {}
.gykkSlide .nav-button {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;border: none;padding: 10px;cursor: pointer;z-index: 10}
.gykkSlide .nav-button.prev {left: 10px}
.gykkSlide .nav-button.next {right: 10px}
.gykkSlide .gykkSlide-dots {text-align: center;margin-top: 10px}
.gykkSlide .dot {display: inline-block;width: 10px;height: 10px;margin: 5px;background-color: gray;border-radius: 50%;cursor: pointer}
.gykkSlide .dot.active {background-color: black}
/* optional: for caption animations */
.caption {position:absolute;top:25px;background-color:#fff;padding:10px 25px}
| Parametre | Açıklama | Varsayılan Değer |
|---|---|---|
| data-auto | Otomatik slayt geçişi yapılacak mı | false |
| data-timer | Otomatik geçiş süresi (ms) | 3500 |
| data-nav | İleri/Geri butonları gösterilsin mi | true |
| data-dot | Dots navigasyonu gösterilsin mi | true |
| data-lazy | Resimleri lazy-load ile yükle | false |
| data-loop | Son slayttan sonra tekrar başa dönsün mü | true |
| data-pause | Hover sırasında otomatik geçişi durdur | false |
| data-count | Ekranda kaç slayt gösterilecek | 1 |
| data-gap | Slaytlar arası boşluk | 0px |
| data-speed | Geçiş süresi (ms) | 500 |
| data-ain | Giriş animasyon sınıfı | "" |
| data-aout | Çıkış animasyon sınıfı | "" |
| data-aduration | Giriş ve çıkış animasyon süresi (ms) | 300 |
| data-caption | Slayt başlıkları (caption) gösterilsin mi | true |
| data-cin | Başlık giriş animasyonu | "" |
| data-cout | Başlık çıkış animasyonu | "" |
| data-cduration | Başlık animasyon süresi (ms) | 1000 |
| data-cdelay | Başlık animasyon gecikme süresi (ms) | 1000 |
| data-minw | Slaytların minimum genişlik değeri (px) | 0 |
<div id="slide1" class="gykkSlide" data-count="1" data-auto="true" data-loop="true" data-nav="true" data-timer="4500" data-ain="fadeIn" data-aduration="2000">
<div class="gykkItem">
<img src="https://placehold.co/600x400?text=Slide+1">
<span class="caption">Caption 1</span>
</div>
<div class="gykkItem">
<img src="https://placehold.co/600x400/000000/FFF?text=Slide+2">
<span class="caption">Caption 2</span>
</div>
<div class="gykkItem">
<img src="https://placehold.co/600x400/000000/FFF?text=Slide+3">
<span class="caption">Caption 3</span>
</div>
<div class="gykkItem">
<img src="https://placehold.co/600x400/000000/FFF?text=Slide+4">
<span class="caption">Caption 4</span>
</div>
<div class="gykkItem">
<img src="https://placehold.co/600x400/000000/FFF?text=Slide+5">
<span class="caption">Caption 5</span>
</div>
</div>
<div id="slide2" class="gykkSlide" data-loop="true" data-nav="true" data-dot="true" data-lazy="true" data-auto="true" data-pause="true" data-timer="3500" data-speed="1500" data-count="3" data-gap="5%" data-minw="150" data-ain="zoomIn" data-aout="zoomOut" data-aduration="3000" data-caption="true" data-cin="flipInX" data-cout="flipOutX" data-cduration="1000" data-cdelay="1000" >
<div class="gykkItem"><img src="https://placehold.co/600x400?text=Slide+1" /><span class="caption">Caption 1</span></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/000000/FFF?text=Slide+2" /><span class="caption">Caption 2</span></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/5b1e1e/FFF?text=Slide+3" /><span class="caption">Caption 3</span></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/101267/FFF?text=Slide+4" /><span class="caption">Caption 4</span></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/FFFFFF/000?text=Slide+5" /><span class="caption">Caption 5</span></div>
<div class="gykkItem"><img src="https://placehold.co/600x400?text=Slide+6"></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/000000/FFF?text=Slide+7"></div>
</div>
<div id="marqueestyle" class="gykkSlide" data-auto="true" data-timer="1500" data-nav="false" data-dot="false" data-loop="true" data-pause="true" data-count="3" data-gap="0" data-speed="1500">
<div class="gykkItem"><img src="https://placehold.co/600x400?text=Slide+1"></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/000000/FFF?text=Slide+2"></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/5b1e1e/FFF?text=Slide+3"></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/101267/FFF?text=Slide+4"></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/FFFFFF/000?text=Slide+5"></div>
<div class="gykkItem"><img src="https://placehold.co/600x400?text=Slide+6"></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/000000/FFF?text=Slide+7"></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/5b1e1e/FFF?text=Slide+8"></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/101267/FFF?text=Slide+9"></div>
<div class="gykkItem"><img src="https://placehold.co/600x400/FFFFFF/000?text=Slide+10"></div>
</div>
data-minw="310"
"data-minw" slide öğelerinin alabileceği px cinsinden minimum genişiği belirler. Bu değer yazılırsa, data-count ile belirlediğiniz adete kadar olan slide öğesi bu genişliğin altına düşmeyecek şekilde eşit olarak dağıtılır.
calculateSizes()
"calculateSizes()" fonksiyonu ekran ebatına göre sığacak öğe sayısını dinamik olarak hesaplar ve yerleştirir.
Normal : gykkSlide.js ~ 14KB - UnMinified