JQuery ile basit bir slider çalışması yaptım. Bu çalışmamda birbiri üstüne absolute konumlu dizilen a ve img elemanları sırayla kullanıcılara gösteriliyor. Geçiş efekti olarak JQuery'nin fadeIn ve fadeOut fonksiyonlarını kullandım.
Sayfanın yüklenme anında resimKut id'li div elemanının içindeki a elemanlarını saydırıyor ve sırasıyla fadeIn-fadeOut efektlerini elemanlara uygulatarak slaytlar arasında geçişi sağlıyorum. a ve img elemanlarına sahip oldukları CSS'ler yine sayfanın yüklenme anında JQuery'nin css() fonksiyonuyla veriliyor. Böylece sliderı düzenlerken stil kodlarıyla uğraşmak zorunda kalmıyorsunuz.
Slider'ı responsive olacak şekilde kodladım. Slider görselleri içinde bulundukları elemanın genişliğine göre otomatik olarak boyutlandırılıyor. Yine çalışma anında slider'da bulunan a'ların yükseklik değerini alıyor ve bunu resimKut id'li elemana atıyorum. Bunu yapma sebebim resimKut elamanını position değerinin relative, içindeki a ve img elemanlarının absolute olmasıdır. Bu durumda içteki elemanları resimKutid'li elemanlardan boyutça bağımsız olacağından sayfa içine doğru yerleşemez, sayfada içeriğinin üstünde çıkar ve sayfa içeriğinin bir kısmının görünmesine engel olur. resimKut id'li dive yüksekli değeri vererek içerikteki diğer elemanları yükseklik kadar kaydırmış oluyorum.
Yükseklik hesaplaması sayfa boyutundaki değişmelere duyarlıdır ve sayfa genişliği değiştikçe otomatik olarak yeniden ayarlanır. Bu özellikle kullanıcılar tablet, telefon gibi cihazları dikey - yatay döndürdükçe sliderın konumlandırma ve boyutlandırma işlemlerinin doğru bir şekilde yapılması için gereklidir.
Son olarak bu kadar zahmete neden katlandım diye sorarsanız sırf standart ul-li yapısını kullanmamak için. Bu yapıyı
tinyMCE editör gibi kodlama kısıtlaması olan editörler kullanırken site içeriğine rahatça slider eklenebilmesi için tasarladım
<div id="resimKut" style="position: relative; display: block; width: 100%; height: 400px;">
<a href="#1"><img src="tugla-duvar.jpg"/></a>
<a href="#2"><img src="bugday-tarlasi.jpg" /></a>
<a href="#3"><img src="flamanli-ampul.jpg" /></a>
<a href="#4"><img src="soru-isaretleri.jpg" /></a>
<a href="#5"><img src="baykus-resmi.jpg" /></a>
</div>
<script>
// <![CDATA[
var i = 1;
var baslatici;
var ici = $('#resimKut a');
var k = 0;
window.onload = function() {
$('#resimKut').height(ici.height());
baslat();
}
function baslat() {
for (j = ici.length; j >= 0; j--) {
$('#resimKut a:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
$('#resimKut img:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
k++;
}
setInterval(cevir, 3000);
}
$(window).on('resize', function() {
$('#resimKut').height(ici.height());
});
function cevir() {
$('#resimKut a:nth-child(' + i + ')').fadeOut(1500);
i < ici.length ? i++ : i = 1;
$('#resimKut a:nth-child(' + i + ')').fadeIn(1500);
}
// ]]>
</script>
// <![CDATA[
var i = 1;
var baslatici;
var ici = $('#resimKut a');
var k = 0;
window.onload = function() {
$('#resimKut').height(ici.height());
baslat();
}
function baslat() {
for (j = ici.length; j >= 0; j--) {
$('#resimKut a:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
$('#resimKut img:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
k++;
}
setInterval(cevir, 3000);
}
$(window).on('resize', function() {
$('#resimKut').height(ici.height());
});
function cevir() {
$('#resimKut a:nth-child(' + i + ')').fadeOut(1500);
i < ici.length ? i++ : i = 1;
$('#resimKut a:nth-child(' + i + ')').fadeIn(1500);
}
// ]]>
</script>
Responsive JQuery Sliderımızın kodlarının canlı hali,
Turgut Arslan
