Easy Slider 를 이용하여 이미지 슬라이더 구현하기

Easy Slider 를 이용하여 이미지 슬라이더 구현하기

 

개발환경 : window 7 32bit,  jquery,  easy slider 1.7, explorer 8, chorm

 

오늘은 자바스크립트 라이브러리를 이용하여 이미지 슬라이더를

쉽게 구현할수 있도록 해주는 easySlider 1.7 에 대해 간략하게

알아본다.

그럼 어떤 라이브러리이냐? jQuery 이다. 한번씩은 접해 보았을

것으로 여긴다. 서적도 많이 나와있으며 css 와 javasscript 를

아주 쉽게 사용할수 있도록 라이브러리와 한 것인데, 나 같은

경우는 Ajax 를 구현하기 위해 처음 사용해 보았었다.

 

(1) 준비

 

아래 링크된 easySlider 1.7 을 다운받는다. 아래 압축파일에는

3개의 테스트 페이지와 기능을 위한 js 파일과 화면디자인을

위한 css 파일이 들어 있다.

그 주요 파일은 다음과 같다.

 easyslider1.7.zip

easySlider1.7.js

jquery.js

screen.css

 

(2) 기본구현

 

2가지의 샘플이 있는데 사용할때는 옵션만 조금만 틀리며

기본적으로 같다. 먼저 준비된 파일을 링크한다.

두번째는 javascript 를 구현한다. 아주 간단하다. 몇가지 옵션과

슬라이더를 구현할 div id 인 #slider 만 넘겨 주면 끝난다.

나머지는 jquery 문법인데 ready 는 자바스크립트에서 window.onload 와

동일하다. 그리니까 페이지가 전부 로딩되었을 때 함수를 실행하라는 뜻이

된다. 좀더 깊이 알고자 한다면 jquery 문법을 참조하기 바란다.

세번째는 슬라이더에 사용할 레이어를 구현하는 것이다. 아래와 같이 div 로

구현한후 #slider 라는 명칭을 주면 된다.

이전, 다음 버튼이 있는 슬라이더는 위에서 기술한 자바스크립트를

이용하면 된다. 양쪽에 버튼이 붙어 있는 것을 볼수 있다. 이 버튼은

교체가 가능하다.

 

두번째 형태는 버튼이 있는 이미지 슬라이더 있다. 스크립트는 아래와 같으며

단지 차이점은 numeric 옵션을 ture 로 주면 된다.

형태는 다음과 같다.

 

(3) 레이아웃 크기 수정

 

이미지가 들어가 있는 레이어의 크기를 입맛에 맞게 수정하고자 할때는

Screen.css 에 값을 수정하면 된다. Width, height 값을 수정하면 크기가 바뀌는 것을

볼수 있다.

#slider li, #slider2 li{ 
	width:696px;
	height:300px;
	overflow:hidden; 
}	

 

(4) 이전, 다음 버튼의 위치 맞추기

 

레이어를 늘이거나 줄이면 버튼의 위치가 맞지 않은데 그것은 css 에서

#slider1next, #slider1prev 정보중에 top 을 고치면 된다.