Bir zamanlar bu tarz örnekler için en çok kullanılan kelimelerden bir tanesi ‘responsive’ kelimesiydi. Hatta ülkemizde bile o kadar çok kullanılıyor ki ilerde Türkçe anlamının tarihe geçmesi bile imkansız değil gibi görünüyor. Responsive kelimesinin eş anlamlısı tarayıcıya duyarlı demek oluyor. Uzun süre bu kelimeyi başlık olarak kullandığım da oldu ancak bu kelimeyi arayan neredeyse sıfır sayılabilecek seviyede.
Bir de son zamanlarda popüler olmaya başlayan bir diğer kelime de ‘flexible’ dir. İlk zamanlardan beri de vardı ama bu kadar yoğun kullanılan bir kelime değildi ülkemizde. İşin bana komik gelen tarafı ise kullanıcılara doğru içeriği nasıl ulaştıracağımızı bilememek oluyor. Bu yüzden konuya bu şekilde başlamak zorunda kaldım. Bu arada uzun süredir hakkını yediğim ve herkesin işine yaramaz diye düşündüğüm FlexSlider aslında tek bir demodan ibaret değil. Bir kaç tane çok kullanışlı ve herkesin işine yarayabilecek örneği bulunuyor.
BxSlider uygulamasının çok popüler olduğunu belki biliyorsunuzdur. Bilmiyorsanız bile bir araştırıp incelemenizi tavsiye ederim. Webtasarımcılar için ihtiyaç duyulan bütün özelliklerde slayt örnekleri bulunuyor. Tek eksikliği sanırım şuradaki örnekte olan çoklu slaytın olmamasıdır. Bunun dışında her türlü örnek mevcut. FlexSlider uygulaması da o kadar fazla olmasa bile aynı görevleri gören hatta hemen hemen aynı şekilde tasarlanmış örneklere sahip bir uygulamadır. Eğer bir slayt show veya slayt ihtiyacınız varsa bu iki örnek yeteri kadar işinizi görür.
Demo sayfasında sadece bir tane örnek bulunduğu için hemen bu işe yaramaz demeyin. Download adresinden edineceğiniz dosyalar içinde yedi adet demo bulunuyor. Web sitenin orta kısımlarına eklemeniz için ince slayt çeşitleri ve sitenin en üstüne ekleyebileceğiniz manşet benzeri slayt örnekleri bulunuyor. Ayrıca resimler arası slaytlara videolar da eklemek mümkün.
Kullanım
- Head etiketleri arasına eklenmesi gereken bölümler.
Js ve stil dosyaları :
<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script defer src="../jquery.flexslider.js"></script>
Javascript :
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
- Body etiketleri arasına eklenmesi gereken bölüm :
Html :
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>