Kapat

merhaba arkadaşlar. bu yazımda sizlerle jquery kullanarak slider yapmayı anlatacağım.

bu yazımda jquery komutlarını kullanarak basit bir slider yapacağız.

öncelikle slider nedir kısaca açıklayalım.

bloklarda gördüğümüz bir kavramdır web setinizin sağında ve ya solunda bulunan yan menülere slider diyoruz işte bu sliderin yapımını kavramak için basit bir slider yapacağız.

kodları yazmadan önce yapılması gerekenleri inceleyelim.

slider adında bir klasör oluşturun.

klasör içerisinde index.html dosyası oluşturalım burada kodlarımızın çalışacağı ana sayfamız yer alacaktır. burada html ve jquery kodları bulunacak.

resimlerinizi koyabilmeniz için images adında bir klasör oluşturun.

yazımın sonunda resimleri sizlerle paylaşacağım. sizler kendinize uygun resimnler kullanabilirsiniz.

son olarakta css komutları yazacağımız bir css klasörü oluşturun ve içerisinede style.css dosyamızı oluşturun.

her zamanki gibi ilk olarak style.css dosyamızın kodlarını yazarak işe başlayalım.

 

css kod:

 

/* Css Sıfırlama */
body {font: 12px/19px Arial; margin: auto}
table,tr,td,h1,h2,h3,h4,h5,h6,ul,li,input,form,textarea {padding: 0; margin: 0; list-style-type: none; border: none;}
img {border: none;}
a {text-decoration: none;}
:focus {outline: none;}

/* Slider */
#slider_container {height: 275px; background-image: url("../images/morarka.png"); background-repeat: no-repeat}
#slider_alt {height: 140px; background-image: url("../images/slider_alt.jpg"); background-repeat: no-repeat}
.slider_alt {margin-left: 410px;}
.slider_alt li {float:left; padding: 80px 20px 0 0; }
.slider {float: left; margin-top: 50px; margin-left: 30px;}
#once {margin-left: 80px; margin-top: 55px}
#sonra {margin-top: 55px}
#yazi {margin-top: 25px; width: 300px}
#goruntu {width: 289px; height: 180px; overflow: hidden}

 

evet arkadaşlar css dosyamız bu şekilde olacaktır.

 

şimdi ise son olarak index.html dosyamızın kodlarını yazalım.

 

<!DOCTYPE html>
<head>
<title>JQuery ile Slider Yapımı</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var a=0;
$(document).ready(function(){
//açılış ayarlarının yapılması
$(".aciklama li").hide();
$(".aciklama li:eq("+a+")").show();
$("#r0").hide();
$("#r0").attr({src:"images/s_btn2.jpg"});
$("#r0").show();

//geri okuna basılca çalıştır
$("#once").click(function(){
once();
});
//ileri okuna basılca çalıştır
$("#sonra").click(function(){
sonra();
});
//butonlara basılca çalıştır
$(".slider_alt li").click(function(){
var b=$(this).index();
btn(b);
});
});

//geri gitme fonksiyonu
function once(){
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn.jpg"});
$("#r"+a).show();
a--;
if(a<0){a=5};
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn2.jpg"});
$("#r"+a).show();
$(".resim li").hide();
$(".aciklama li").hide();
$(".resim li:eq("+a+")").show();
$(".aciklama li:eq("+a+")").show();
};

//ileri gitme fonksiyonu
function sonra(){
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn.jpg"});
$("#r"+a).show();
a++;
if(a>5){a=0};
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn2.jpg"});
$("#r"+a).show();
$(".resim li").hide();
$(".aciklama li").hide();
$(".resim li:eq("+a+")").show();
$(".aciklama li:eq("+a+")").show();
};

//buton ile slide geçiş fonksiyonu
function btn(b){
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn.jpg"});
$("#r"+a).show();
a=b;
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn2.jpg"});
$("#r"+a).show();
$(".resim li").hide();
$(".aciklama li").hide();
$(".resim li:eq("+a+")").show();
$(".aciklama li:eq("+a+")").show();
};

//her on saniyede, bir sonrakine geç
var int=self.setInterval("sonra()",10000);
</script>
</head>
<body>
<div id="slider_container">
<div class="slider">
<div id="once"><a href="javascript:void(0)"><img src="images/onceki.png" /></a></div>
</div>
<div class="slider">
<div id="yazi">
<ul class="aciklama">
<li>1. resim ile ilgili yazı</li>
<li>2. resim ile ilgili yazı</li>
<li>3. resim ile ilgili yazı</li>
<li>4. resim ile ilgili yazı</li>
<li>5. resim ile ilgili yazı</li>
<li>6. resim ile ilgili yazı</li>
</ul>
</div>
</div>
<div class="slider">
<div id="goruntu">
<ul class="resim">
<li><a href="#"><img src="images/resim1.jpg" /></a></li>
<li><a href="#"><img src="images/resim2.jpg" /></a></li>
<li><a href="#"><img src="images/resim3.jpg" /></a></li>
<li><a href="#"><img src="images/resim4.jpg" /></a></li>
<li><a href="#"><img src="images/resim5.jpg" /></a></li>
<li><a href="#"><img src="images/resim6.jpg" /></a></li>
</ul>
</div>
</div>
<div class="slider">
<div id="sonra"><a href="javascript:void(0)"><img src="images/sonraki.png" /></a></div>
</div>
</div>

<div id="slider_alt"><div class="slider_alt">
<ul>
<li><a href="javascript:void(0)"><img id="r0" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r1" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r2" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r3" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r4" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r5" src="images/s_btn.jpg" /></a></li>
</ul>
</div></div>
</body>
</html>

 

evet arkadaşlar html kodlarımızıda bu şekilde yazdıktan sonra jquery sliderimiz oluşmuş oldu.

yazımın altında resimleri bulabilirsiniz.

iyi bloglamalar herkese.

jquery ile slider yapımı

wordpress sitennizi kurduktan sonra sizin için önemli olan ve mutlaka bilmeniz gereken birşey varki oda wordpress eklenti yüklemesidir.
bu yazıda wordpress için eklenti yükleme yöntemlerinden bahsedeceğim.
bu yöntemlerden birini kullanarak eklentilerinizi yükleyebilirsiniz.
not:
wordpress.com üzerinden açmış olduğunuz ücretsiz bloglarda eklenti yüklemesi yapamazsınız.
bu 3 yöntem wordpress.org içindir.
wordpress bloğunda 3 farklı eklenti yükleme yöntemi bulunmaktadır.
1. yöntem:
wordpress yönetim panelinize gidin ve eklentiler sekmesi altında bulunan yeni ekle butonuna tıklayın. yüklemek istediğiniz eklentiyi arama bölümüne yazıp bulun ve yükle seçeneğine tıklayın, yalnızca bir kaç saniye içerisinde eklentiniz yüklenmiş olacak yükleme bittikten sonra etkinleştirme butonunu göreceksiniz etkinleştirin.
evet eklentiniz aktif hale gelmiştir. eklentinizin ayarlarını yapabilirsiniz artık.
not 2:
her eklentinin ayarları farklı olduğunu unutmayın.
2. yöntem:
wordpress bloğunuza yüklemek istediğiniz eklentiyi bilgisayarınıza indirin, ardından yönetim panelinize gidip eklentiler sekmesi altından yükle seçeniğini seçin, gözat butonuna tıklayıp bilgisayarınızdan dosyayı seçip içeri aktarın ve eklenti yüklemesi tamamlandıktan sonra eklentinizi etkinleştirmeyi unutmayın.
3. yöntem:
yüklemek istediğiniz eklentiyi bilgisayarınıza indirin, filezilla gibi ftp programlarını kullanarak sunucu ile bilgisayarınız arasındaki bağlantıyı kurun.
eğer sunucu bilgilerinizi bilmiyorsanız hosting firmanızdan edinmelisiniz.
filezilla bağlantısını yaptıktan sonra ekran ikiye bölünmektedir. sağ tarafta sunucunuz, sol tarafta ise bilgisayarınız yer almaktadır.
öncelikle dosyanın yükleneceği yeri sunucunuzdan seçin, ardından bilgisayarınızdaki eklentiyi bulun yükle seçeneğine tıklayın kısa bir süre içerisinde yükleme tamamlanacaktır.
daha sonra diğer 2 yöntemde olduğu gibi yönetim panelinden eklentinizi etkinleştirmeyi unutmayın.
evet arkadaşlar bu yöntemleri kullanarak eklenti yüklemesi yapabilirsiniz. hangi yöntemi kullanacağınız size kalmıştır elbette. ama ben 1 ve ya 3. yöntemi kullanıyorum. sizlerede tavsiye ederim.
iyi bloglamalar herkese.

wordpress eklenti yükleme


Kapat