Forum
Aktif konular
Üyeler
Kurallar
Arama
Bedava Jquery Slider Bedava Jquery Slider
-
bugun ucersinde yazicam nasil kullanilmasi gerektigini.. cok kolay.. takipte olun ;)
-
elinde ne kadar slider varsa ekle hocam, hepsi lazım ;)
-
simdiii gelelim kullaniminaa..
butun kodlar index.php nin icerisinde..
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
once jquery yi sitemize dahil ediyoruz.. isterseniz son surumunu indirip kendi dizininize atabilirsiniz..
sonra css olayi yaziyoruz..
#LS_Wrapper {
width:1150px;
height:60px;
overflow:hidden; /*hides the divs which are outside of the slider*/
position:relative;
margin:0px auto;
border:1px solid #ccc;
//-webkit-box-shadow:0px 0px 10px #222;
}
#LS_Slider {
position:relative; /*this makes the #LS_Slider div slidable*/
height:60px;
width:4600px;
left:0px;
}
#LS_Slide1 {
float:left;
height:60px;
width:1150px;
background:red;
}
#LS_Slide2 {
float:left;
height:60px;
width:1150px;
background:yellow;
}
#LS_Slide3 {
float:left;
height:60px;
width:1150px;
background:red;
}
#LS_Slide4 {
float:left;
height:60px;
width:1150px;
background:yellow;
}
index.php icerisinde bunlardan fazla css var ama slider in cssleri sadece bunlardan ibaret..
sonra html hiyerarsimizi kuruyoruz..
<!-- THE SLIDER STARTS HERE --> burda basliyor..
<div id="LS_Wrapper"> //bu en distaki div yani hepsini kapsayan ve sliderin nekadarinin gorunecegine karar veren div bu.
<div id="LS_Slider"> //du div imaj veya icerigin hepsini kapsayan ve kayma olayini yapan div..
<div id="LS_Slide1"><img src="img/slideIMG1.png" /></div> //bu icerik divlerinden ilki
<div id="LS_Slide2"><img src="img/slideIMG2.png" /></div> //bu icerik divlerinden ikincisi
<div id="LS_Slide3"><img src="img/slideIMG3.png" /></div> //bu icerik divlerinden ucuncusu
<div id="LS_Slide4"><img src="img/slideIMG4.png" /></div> //bu icerik divlerinden dorduncusu (isterseniz daha fazla ekleyebilirsiniz sonsuza kadar gidebilir)
</div> // LS_Slider'in kapanisi
</div> // LS_wrapper'in kapanisi
<!-- THE SLIDER ENDS HERE -->burda bitiyor..
ve sonrada slider olayini gerceklestiren scriptimizi dahil ediyoruz.. ister <head></head> taglari icine istersenizde bilmemne.js dosyasi olusturup icine atarak siteye dahil edebilirsiniz..
<script>
$(function(){
setInterval("slideIt()", 3000); // buradaki 3000, 3 saniyeye esittir yani bunu 7000 yaparsaniz 7 saniyede bir kayar.. istediginiz gibi ayarlayin..
}); // the document ready function ends here
function slideIt(){ //kayma islemini gerceklestiren fonksiyonumuzu aciyoruz..
var sliderPos = $("#LS_Slider").position(); // yukarda belirttigim kayacak olan div in o anki pozisyonunu buluyoruz
var sliderLeft = sliderPos.left; // kayacak divin left degerini buluyoruz.
//alert(sliderLeft);
var slideMore = sliderLeft - 1150; //kac px kayacak onu hesapliyoruz
var totalSlides = $("div[id*='LS_Slide']").length; //slider icinde kac tane div var onu buluyoruz..
var end = (totalSlides * 1150) - 2300; //en son slide a geldiginde en basa donmesi icin gereken degeri buluyoruz..
//alert(end);
if(sliderLeft == -end){ //eger slider en sona geldiyse
$("#LS_Slider").animate({left: "0px"}); // 1. slide a git
}else{ //hala sona ulasmadiysa
$("#LS_Slider").animate({left: slideMore}); //birsonrakine kaydir
}
}
</script>
olay bundan ibaret arkadaslar umarim aciklayici olmustur..
sorulariniz varsa yazabilirsiniz vakit buldukca cevaplarim..
-
mehmetdiyebiri bunu yazdı:
-----------------------------
elinde ne kadar slider varsa ekle hocam, hepsi lazım ;)
-----------------------------su an sadece bunu yazdim hocam nasil biseye ihtiyacin varsa yardimci oluruz ;)
-
Hackingo: adaşım tebrik ve takdir eder, güzel çalişmalarinin devamını beklerim. sağolasın. ;)
-
Master bunu yazdı:
-----------------------------
Hackingo: adaşım tebrik ve takdir eder, güzel çalişmalarinin devamını beklerim. sağolasın. ;)
-----------------------------eyvallah hocam.. sirada jquery acilir kapanir menu var onu eklicem bi ara.. gorunus super.. takipte olun ;)
-
hocam kusura bakma ama bişey yapmamışsın ki zaten google api kullanarak entegre etmişsin sayfaya hiçbişey yok.
-
angels_demos bunu yazdı:
-----------------------------
hocam kusura bakma ama bişey yapmamışsın ki zaten google api kullanarak entegre etmişsin sayfaya hiçbişey yok.
-----------------------------google api online jquery cekebilecegin adres kardesim.. aciklamayi okusan anlarsin.. istersen jquery i indirip kendi dizininede atabilirsin.. kapiss?
bu arada neden 2gundur baltalama calismalari icerisindesin onuda anlamis degilim kullanicaksan indir kullan kullanmicaksan ihtiyaci olanlara engel olma :/
-
güzel çalışma. Bir çizik atalım. Çalışmalarının devamını dilerim.
-
DrKill bunu yazdı:
-----------------------------
güzel çalışma. Bir çizik atalım. Çalışmalarının devamını dilerim.
-----------------------------sagolasin..
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla