Bu yazımızda, önceki dersimizdeki, image kaydırma (image slider), uygulamasının içerik kaydırma versiyonunu yapacağız, mantığımız aynı, ölçü ve pozisyon fonksiyonlarını incelemek için önceki derslerimize göz atabilirsiniz.
Uygulama:
İçerikleri ileri geri tuşlarıyla kaydırabilirsiniz.
İçerik başlığı-1
Lorem ipsum dolor sit amet, dionysiade in deinde cupis hominem inquam cives perfusa. Naufragium feugait o animali viderat Apollonius mihi. Devamı...
İçerik başlığı-1
Lorem ipsum dolor sit amet, dionysiade in deinde cupis hominem inquam cives perfusa. Naufragium feugait o animali viderat Apollonius mihi. Devamı...
İçerik başlığı-1
Lorem ipsum dolor sit amet, dionysiade in deinde cupis hominem inquam cives perfusa. Naufragium feugait o animali viderat Apollonius mihi. Devamı...
İçerik başlığı-1
Lorem ipsum dolor sit amet, dionysiade in deinde cupis hominem inquam cives perfusa. Naufragium feugait o animali viderat Apollonius mihi. Devamı...
CSS yapısı:
#area_product{
position:relative;
border:1px dashed #ff0000;
width:600px;
height:320px;
padding:5px;
clear:both;
}
#overflow_content{
position:relative;
width:233px;
height:300px;
float:left;
border:1px solid #ccc;
clear:both;
overflow:hidden;
}
#slider_dir{
float:left;
width:60px;
margin:0;
padding:0;
margin-left:0px;
margin-top:8px;
}
#slider_dir li{
display:inline;
list-style:none;
cursor:pointer;
}
.content_list{
width:1600px;
height:300px;
padding:0;
margin:0;
float:left;
position:absolute;
left:0;
}
.content_list li{
float:left;
display:inline;
list-style:none;
padding:5px;
}
.content_sl{
width:220px;
text-align:justify;
}
.content_sl h4{
margin:0;
padding:0;
margin-top:10px;
}
.content_sl p{
margin:0;
padding:0;
}
.content_sl img{
border:1px solid #d1d1d1;
-moz-box-shadow: 0px 3px 3px 0px #ccc;
-webkit-box-shadow: 0px 3px 3px 0px #ccc;
box-shadow: 0px 3px 3px 0px #ccc;
}
HTML yapısı:
<div id="area_product">
<div id="overflow_content">
<ul class="content_list">
<li><div class="content_sl"><img src="path/to/img" width="218" height="140" alt="İçerik Kaydırıcı" title="İçerik Kaydırıcı" /><h4>İçerik başlığı-1</h4><p>Buraya yazı gelecek. <a href="#">Devamı...</a></p></div></li>
<li><div class="content_sl"><img src="path/to/img" width="218" height="140" alt="İçerik Kaydırıcı" title="İçerik Kaydırıcı" /><h4>İçerik başlığı-1</h4><p>Buraya yazı gelecek. <a href="#">Devamı...</a></p></div></li>
<li><div class="content_sl"><img src="path/to/img" width="218" height="140" alt="İçerik Kaydırıcı" title="İçerik Kaydırıcı" /><h4>İçerik başlığı-1</h4><p>Buraya yazı gelecek. <a href="#">Devamı...</a></p></div></li>
<li><div class="content_sl"><img src="path/to/img" width="218" height="140" alt="İçerik Kaydırıcı" title="İçerik Kaydırıcı" /><h4>İçerik başlığı-1</h4><p>Buraya yazı gelecek. <a href="#">Devamı...</a></p></div></li>
</ul>
</div>
<ul id="slider_dir">
<li id="prev_but"><img src="left_passive.png" width="16" height="16" alt="" title=""/></li>
<li id="next_but"><img src="right_active.png" width="16" height="16" alt="" title=""/></li>
</ul><br/>
</div>
JQuery Kodları:
<script type="text/javascript">
$(document).ready(function(){
//Listemizin genişlik değerini buluyoruz
//(220px katman genişliği+10px padding değeri=230px*4 (4 adet li etiketi var))
var width=($(".content_list li").length)*230;
//Her seferinde 1 adet içerik göstereceğimiz için
//Son içeriğin soldan uzaklığını tespit ediyoruz
var last_one=230-width;
//Sonraki butonuna tıklanınca
$("#next_but").click(function(){
//Önceki butonunun resmini aktif resim ile değiştiriyoruz
$("#prev_but").children("img").attr('src','images/content/demo/left_active.png');
//Listenin soldan uzaklığını belirliyoruz
var list_pos=($(".content_list")).position();
var list_left=list_pos.left;
//Eğer liste son içeriğe gelmediyse sola doğru kaydırıyoruz
if(list_left>last_one){
$(".content_list").animate({
left:"-=230"
});
}else{
//Son içerik görüntüleniyorsa, yani sona gelindiyse
//Pasif buton resmiyle değiştiriyoruz
$(this).children("img").attr("src","images/content/demo/right_passive.png");
}
});
//Önceki butonuna tıklanınca
$("#prev_but").click(function(){
//Sonraki butonunun resmini aktif resim ile değiştiriyoruz
$("#next_but").children("img").attr("src","images/content/demo/right_active.png");
//Listenin soldan uzaklığını belirliyoruz
var list_pos=($(".content_list")).position();
var list_left=list_pos.left;
//Eğer liste ilk içeriğe gelmediyse sağa doğru kaydırıyoruz
if(list_left<0){
$(".content_list").animate({
left:"+=230"
});
}else{
//Son içerik görüntüleniyorsa, yani başa gelindiyse
//Pasif buton resmiyle değiştiriyoruz
$(this).children("img").attr("src","images/content/demo/left_passive.png");
}
});
});
</script>
Açıklamalar:
Gerekli açıklamaları kodların üzerinde belirtmeye çalıştım, çok ekstra bir durum da olmadığı için ayrıntılı bir açıklama yapmadım, daha önceki örneğimizden pek farkı yok, dikkat etmenizi istediğim birkaç noktayı da aşağıda belirttim.
- "#overflow_content" id'li katman, içerikleri sunduğumuz listeyi saran dış katmandır, bunun genişlik değeri ile göstereceğimiz içerik genişliğini sınırladık, ayrıca "position" değeri olarak "relative"verdik, listemizin bulunduğu katmana da "absolute" değerini verdik ki, alanımız "#overflow_content" katmanı ile sınırlansın, ayrıca "#overflow_content" katmanının "overflow" değerini de "hidden" yaptık, bu sayede listemizin dışarda kalan kısmını göstermemiş olduk, dikkat ederseniz liste alanımızın genişlik değeri "1600px" eğer "hidden" yapmasaydık tüm içerik görüntülenecekti
Kolay gelsin, görüşmek üzere...
