JQUERY Akordiyon Slider

Bu yazımda Diğer sitelerde gördüğüm ve hoşuma giden akordiyon şeklinde slider yapımını anlatacağım

şimdi kodlarımıza geçmeden önce klasör yapımızı göstereceğim klasöt yapımız aşağıdaki gibi olacak

anadizin / index.html

anadizin / css / style.css

anadizin / js / jquery-1.7.2.min.js

anadizin / js / slidemenu.js

anadizin / images / 1.gif

anadizin / images / 2.gif

anadizin / images / 3.gif

anadizin / images / 4.gif

şimdi tek tek bütün dosyaların içeriğine gelecek olursak

 

anadizin / index.html


 

anadizin / css / style.css

* {margin:0; padding:0}
.slider {list-style:none; width:459px; height:100px; display:block; overflow:hidden}
.slider li {float:left; display:inline; overflow:hidden}

 

anadizin / js / jquery-1.7.2.min.js

http://code.jquery.com/jquery-1.7.2.min.js

 

anadizin / css / slidemenu.js

var slideMenu=function(){
	var sp,st,t,m,sa,l,w,sw,ot;
	return{
		build:function(sm,sw,mt,s,sl,h){
			sp=s; st=sw; t=mt;
			m=document.getElementById(sm);
			sa=m.getElementsByTagName('li');
			l=sa.length; w=m.offsetWidth; sw=w/l;
			ot=Math.floor((w-st)/(l-1)); var i=0;
			for(i;iot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
						owt=owt+(ow-oi)}}
				s.style.width=(w-owt)+'px';
			}else{clearInterval(m.timer)}
		}
	};
}();

Projenin Çalışır Haline Aşağıdaki Link Üzerinden Erişebilirsiniz :

http://enesdayanc.com/projeler/jquery-Horizontal-Accordion-slider/

Projede kullanılan resimleri aşağıdaki linkten indirebilirsiniz :

http://enesdayanc.com/projeler/jquery-Horizontal-Accordion-slider/images.rar

Kullanımdaki Ayrıntı Yere Gelirsek En önemli nokta head tagları arasındaki


Kodu bu kod üzerindeki ilk iki parametre çok önemli ilk parametre slider yapacağınız listenin id'si ikinci parametre ise mause ile üzerine gelindiğinde parçanın ne kadar açılacağı bunları düzgün ayarlarsanız projenizde sıkıntı çekmeden kullanabilirsiniz