gykkSlide v1.2

Yapay zeka ile geliştirilen, ek kütühane gerektirmeyen (animasyonlar dahil edilmedi), özelleştirilebilir içerik kaydırıcı...

1. HTML Yapısı ve Kullanımı

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>

2. CSS Tarzı ve Düzen


.gykkSlide * {user-select:none}
.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}

3. Parametreler ve Özellikler

Parametre Açıklama Varsayılan Değer Birim
data-auto Otomatik slayt geçişi yapılacak mı false Boolean
data-timer Otomatik geçiş süresi (ms) 3500 ms
data-nav İleri/Geri butonları gösterilsin mi false Boolean
data-dot Dots navigasyonu gösterilsin mi false Boolean
data-lazy Resimleri lazy-load ile yükle false Boolean
data-loop Son slayttan sonra tekrar başa dönsün mü true Boolean
data-pause Hover sırasında otomatik geçişi durdur false Boolean
data-count Ekranda kaç öge gösterilecek 1 adet
data-gap Slaytlar arası boşluk 0px px *
data-speed Geçiş süresi 500 ms
data-ain Giriş animasyon sınıfı class adı
data-aout Çıkış animasyon sınıfı class adı
data-aduration Giriş ve çıkış animasyon süresi 300 ms
data-caption Slayt başlıkları (caption) gösterilsin mi ** true Boolean
data-cin Başlık giriş animasyonu class adı
data-cout Başlık çıkış animasyonu class adı
data-cduration Başlık animasyon süresi 1000 ms
data-cdelay Başlık animasyon gecikme süresi 1000 ms
data-minw Slaytların minimum genişlik değeri 0 px *

* gap ve minw değerleri sabit px cinsinden verilebileceği gibi göreceli olarak da verilebilir. Erana göre [vw, vh, vmin, vmax] veya slider ana elemanına göre [%] veya diğer değişkenlere göre [em, rem, pt, cm, mm, in] tanımlanabilir.

** caption false ayarlanırsa slide alanı içindeki tüm .caption elemanları DOM'dan kaldırılır.

4. Kullanım Örnekleri

Örnek 1: Tek Slayt Gösterimi


  <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>
Caption 1
Caption 2
Caption 3
Caption 4
Caption 5

Örnek 2: 3lü Slayt ve Dots Navigasyonu


  #slide1 .caption {position:absolute;top:25px;background-color:#fff;padding:10px 25px}
<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>
Caption 1
Caption 2
Caption 3
Caption 4
Caption 5
Caption 6
Caption 7

Örnek 3: MARQUEE stili


<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>

Örnek 4: Görselsiz


<style>	
#gorselsiz .gykkItem {
text-align:center;
width:100%;aspect-ratio: 16 / 4; /* fixed */
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; /* captionlar birbiri üzerinde görünmesin diye, düz renk de yapılabilir */
animation: gradient 15s ease infinite; /* bg animasyonlu da olabilir */ 
}
@keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
</style>	

<div id="gorselsiz" class="gykkSlide" data-count="1" data-auto="true" data-caption="true" data-loop="1" data-nav="true" data-timer="4500" data-ain="fadeIn" data-aout="fadeOut" data-aduration="2000" data-cout="fadeOut" data-cin="morphIn" data-cduration="3000" data-cdelay="1000">
    <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>

1. Caption Başlık

1. caption için metin alanı. HTML de olabilir

2. Caption Başlık

2. caption için metin alanı. HTML de olabilir

3. Caption Başlık

3. caption için metin alanı. Lorem ipsum dolor sit amet

4. Caption Başlık

4. caption için metin alanı. HTML de olabilir

6. Caption Başlık

5. caption için metin alanı. HTML de olabilir

 

Responsive

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.

İndirme

Normal : gykkSlide.js ~ 14KB - UnMinified