간단한 이미지 슬라이드쇼 만들기

웹 페이지에서 자주 볼 수 있는 옆으로 움직이는 슬라이드쇼 이미지를 플러그인을 이용해 간단한 방법으로 만들어 보겠습니다.

순수 자바스크립트만 이용하여 구현하려면 코드가 꽤 길어지지만, 자바스크립트를 보다 간단하고 효율적으로 사용하기 위해 만들어진 제이쿼리를 이용하면 보다 간략한 방법으로 구현할 수 있습니다.

먼저 폴더 2개를 생성하여 폴더의 이름을 하나는 plugins로 변경해 주고, 하나는 superslides로 변경해 줍니다.

아래 사이트에 접속하여, 우측상단의 fork me on GitHub를 통해 플러그인 파일을 다운 받습니다.

http://archive.nicinabox.com/superslides/

다운받은 파일의 압축을 풀고, dist폴더안의 모든 파일과 자바스크립트 폴더안에 있는 jquery-easing.1.3.js 파일만 복사하여 생성한 superslides폴더안에 붙여 넣고, superslides폴더를 plugins폴더 안에 넣습니다.

아래와 같이 html구조를 만들어 아이디와 클래스 값을 주고, 슬라이드 이미지를 적용할 사진을 li태그에 넣어줍니다.

소스코드

<link rel="stylesheet" href="plugins/superslides/stylesheets/superslides.css">

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<script src="plugins/superslides/jquery.superslides.min.js"></script> 는,

위와 같이 다른 태그와 섞이지 않게 적당한 위치에 넣어줍니다.

마지막으로 아래와 같이 함수를 넣어주면 끝난다.

참고로 함수 값 중

inherit_width_from: '#slide-container',는 슬라이드의 넓이를 구성할 요소이고

inherit_height_from: '#slide-container',는 슬라이드의 높이를 구성할 요소이다.

play: 3000, 는 슬라이드가 움직이는 재생시간(1/1000초 단위)으로 3초를 설정하였고,

animation: 'slide' 는 애니메이션 옵션(fade/slide)으로 슬라이드를 적용하였다.

위와 같이 적용한 후 html파일을 열어 보았다.

아무것도 나오지가 않는다. 뭐지..

아차, 이미지 크기 값을 주는 것을 빼먹었다;;

이미지 사이즈는 각자 올리는 파일마다 다르기 때문에, 해당 이미지 파일의 사이즈를 확인한 후

위와 같이 상위 아이디값에 width와 height값을 픽셀단위로 주면 된다.

(이미지가 작을 경우 한쪽으로 치우쳐 있으니, 가운데 정렬을 원할경우 margin 0 auto를 추가하면 된다.)

다시 html파일을 열어본 결과, 아래와 같이 슬라이드쇼 이미지가 잘 구현되었다.