많이들 사용하시는 Slider 에 대해서...

퍼블리셔/스크립터를 한지 꽤 되었는데도,

아주 특이한 슬라이드를 제외하고는 보통의 경우 

슬라이드를 일반적으로 가져와서 사용하는데, 사용을 하다보니

어떤것은 어떤게 되고, 또 어떤것은 어떤게 안되고 합니다.

대충 참고하시라고 끄적거립니다.

touchSlider (터치슬라이더)

http://touchslider.com/ 

- 구조 : 기본적으로 html로 구조(슬라이드 영역, 버튼, 슬라이드의 페이지버튼 등)를 만들어줘야 합니다.

- 지원여부

  ㆍ동적 너비 사이즈 : 지원안함 

  ㆍ슬라이드 페이지 태그 구분 : div

  ㆍ마지막 슬라이드에서 다음 클릭시 다음 슬라이드 움직임 : 우측 슬라이드

- 비고 : div 구분으로 인한 내부 커스터마이징이 편하지만, 동적 사이즈로 인한 스크립트가 지저분해짐 

FlexSlider (플랙스슬라이더)

https://www.woothemes.com/flexslider/ 

- 구조 : 슬라이더 영역만 잡으면 버튼과 페이징은 자동 생성됨

- 지원여부

  ㆍ동적 너비 사이즈 : 지원 

  ㆍ모바일 터치 기능 : 지원

  ㆍ슬라이드 페이지 태그 구분 : li

  ㆍ컨테이너밸트 기능 : Carousel 기능지원

  ㆍ마지막 슬라이드에서 다음 클릭시 다음 슬라이드 움직임 :

     싱글이미지방식 : 우측 슬라이드

     컨테이너밸트 : 처음으로 좌측 슬라이드

- 비고 : li구분으로 내부의 h태그 사용 불가 하지만 모든 기능이 가장 안정적임 

BxSlider

https://www.woothemes.com/flexslider/ 

- 구조 : 슬라이더 영역만 잡으면 버튼과 페이징은 자동 생성됨

- 지원여부

  ㆍ동적 너비 사이즈 : 지원 

  ㆍ모바일 터치 기능 : 지원

  ㆍ슬라이드 페이지 태그 구분 : li

  ㆍ컨테이너밸트 기능 : Carousel 기능지원

  ㆍ마지막 슬라이드에서 다음 클릭시 다음 슬라이드 움직임 :

     싱글이미지방식 : 우측 슬라이드

     컨테이너밸트 : 처음으로 좌측 슬라이드

- 비고 : 

  컨트롤부분과 페이징부분이 div 영역에 쌓여있음, 

  이것을 제외한 모든 기능이 FlexSlider 상당히 유사함, 

  옵션에 따라 처음과 끝을 인식해서 다음, 이전 버튼 보임처리

*내용추가

모든 슬라이드는 화면이 로딩된 후에 실행되기 때문에,

가능하다면 사용할때 첫번째 화면을 제외한 나머지를 css로 숨김처리를하고

슬라이드 로드시에 보임처리 하시면 화면 로딩시 화면이 깔끔해집니다.