-
이미지 슬라이드 [javascript] :: 마이구미Javascript 2016. 8. 1. 21:18반응형
최신 글 - http://mygumi.tistory.com/326
이번 글은 이미지 슬라이더에 대해 알아볼 것이다.
다들 페이지 작업을 해봤다면 누구나 이 기능을 넣을려고 했을 것이다.
많은 라이브러리가 존재하고 대중화된 기능이다.
대중화되고 쉽게 라이브러리가 존재하여도 힘든 사람들을 위해 작성해보았다.
사용할 라이브러리는 딱 필요한 기능과 적절히 확장할 수 있다.
또한 자바스크립트로만 만들어진 라이브러리다.
그러므로 jquery를 사용하지 않는다면 더더욱 좋은 라이브러리이다.
간단히 샘플 소스를 보자.
html 소스
<!DOCTYPE html> <html> <head> <title>Demo 1 - Menucool Image Slider</title> <link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" /> <script src="themes/1/js-image-slider.js" type="text/javascript"></script> <link href="generic.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="sliderFrame"> <div id="slider"> <a href="http://www.menucool.com/javascript-image-slider" target="_blank"> <img src="images/image-slider-1.jpg" alt="Welcome to Menucool.com" /> </a> <img src="images/image-slider-2.jpg" /> <img src="images/image-slider-3.jpg" alt="" /> <img src="images/image-slider-4.jpg" alt="#htmlcaption" /> <img src="images/image-slider-5.jpg" /> </div> </div> </body> </html>
위의 소스만 있으면 이미지 슬라이더 기능을 사용할 수 있다.
아래 페이지를 참고하자.
실질적인 라이브러리 스크립트 파일을 보면 아래와 같다.
javascript 소스
var sliderOptions = { sliderId: "slider", startSlide: 0, effect: "series1", effectRandom: false, pauseTime: 2800, transitionTime: 1200, slices: 14, boxes: 8, hoverPause: 1, autoAdvance: true, thumbnailsWrapperId: "thumb_container_id", m: false, license: "mylicense" }; var imageSlider=new mcImgSlider(sliderOptions); function mcImgSlider(i){for(var I=function(a){return ................
난독화된 소스는 신경쓰지말자.
우리는 sliderOptions 객체의 속성들을 통해 원하는대로 이미지 슬라이더 기능을 제어할 수 있다.
객체의 속성들이 무엇을 의미하는 지를 보자.
그러면 조금 더 쉽게 자신이 원하는대로 수정하여 사용하면 된다.
* sliderId
실질적인 이미지 슬라이더를 이용할 이미지들을 둘러싸고 있는 부모 div영역의 ID명과 같아야한다.
* startSlide
시작할 index 번호이다. (0이 첫번째 이미지이다)
숫자, shuffle, random을 설정할 수 있다.
ex) startSlide : 1 => 두번째 이미지부터 시작, startSlide : "random" => 랜덤으로 순서, startSlide : "shuffle" => 혼합 순서
* effect이미지 넘길 때의 효과를 정할 수 있다. effect : "series1"* series1: 6, 8, 15, 2, 5, 14, 13, 3, 7, 4, 14, 1, 13, 15 해당 지정 번호의 효과만 사용 ex) effect : "series1"
* series2: all effects from 1 to 17 1부터 17까지 모든 효과 사용 ex) effect : "series2"* 원하는 효과만 사용 ex) effect : "1,6,7,9" => 1,6,7,9번의 효과만 사용아래 페이지에서 테스트할 수 있으니 사이트가서 사용해보길 바란다. 테스트 페이지
* effectRandom
효과 순서를 랜덤으로 할 것인지 ex) effect : true => 랜덤 순서 사용
* pauseTime
다음 이미지로 넘어갈 때의 정지시간
* transitionTime
이미지 슬라이더 기능의 시간 == 전환시간
* slices
이미지 슬라이더 효과의 사용 갯수 ex) slices : "10" => 효과 10개 사용
* boxes
전환효과 시 사용될 각 행의 타일 갯수 ex) boxes : "5" => 각 행의 타일갯수는 5개
* hoverPause
마우스 hover 시 정지 여부 ( 0, 1, 2 )
ex) 0은 마우스 hover시라도 정지 안함, 1은 마우스 hover시 정지, 2는 demo 버전마다 다름 (썸네일 관련)
* autoAdvance
이미지 자동 넘어가기 여부 ( true, false ) ex) autoAdvance : true => 자동
* thumbnailWrapperId
썸네일 있는 버젼 사용시 썸네일 영역의 부모 div ID명 ( demo2 참고)
* m
클릭으로 이미지 넘길 경우의 효과 ( true, false ) ex) m : true => 클릭 시는 왼쪽 또는 오른쪽에 대해서만 효과 적용
* license
더 많은 기능을 사용하기 위한 유료
라이브러리 스크립트 파일을 보면 인스턴스명을 알 수 있다.
var imageSlider = new mcImgSlider(sliderOptions);
이 변수명을 통해 어떤 특정 함수를 확장 또는 사용할 수 있다.
개발자 도구를 통해 확인해보면 아래와 같이 확인할 수 있다.
예를 들면,
imageSlider.next() // 다음 이미지 전환 imageSlider.previous() // 이전 이미지 전환 imageSlider.displaySlide(2) // index 번호가 2인 이미지로 전환
아래 링크는 8가지의 다른 버전들이 존재한다.
원하는 데모를 참고하여 이용해보자.
참고 자료 및 라이브러리
http://www.menucool.com/javascript-image-slider
반응형'Javascript' 카테고리의 다른 글
자바스크립트 유용한 팁 - Comma :: 마이구미 (0) 2016.08.08 animate를 활용한 상단 메뉴 노출 :: 마이구미 (0) 2016.08.02 자바스크립트 모듈 패턴 :: 마이구미 (0) 2016.07.26 자바스크립트 즉시실행함수 :: 마이구미 (0) 2016.07.25 || , && 연산자 사용법 [javascript] :: 마이구미 (5) 2016.07.24
