많이들 사용하시는 Slider 에 대해서... 정보
기타 많이들 사용하시는 Slider 에 대해서...본문
퍼블리셔/스크립터를 한지 꽤 되었는데도,
아주 특이한 슬라이드를 제외하고는 보통의 경우
슬라이드를 일반적으로 가져와서 사용하는데, 사용을 하다보니
어떤것은 어떤게 되고, 또 어떤것은 어떤게 안되고 합니다.
대충 참고하시라고 끄적거립니다.
touchSlider (터치슬라이더)
- 구조 : 기본적으로 html로 구조(슬라이드 영역, 버튼, 슬라이드의 페이지버튼 등)를 만들어줘야 합니다.
- 지원여부
ㆍ동적 너비 사이즈 : 지원안함
ㆍ모바일 터치 기능 : 지원ㆍ슬라이드 페이지 태그 구분 : div
ㆍ컨테이너밸트 기능 : 직접 div 내의 코딩ㆍ마지막 슬라이드에서 다음 클릭시 다음 슬라이드 움직임 : 우측 슬라이드
- 비고 : div 구분으로 인한 내부 커스터마이징이 편하지만, 동적 사이즈로 인한 스크립트가 지저분해짐
FlexSlider (플랙스슬라이더)
https://www.woothemes.com/flexslider/
- 구조 : 슬라이더 영역만 잡으면 버튼과 페이징은 자동 생성됨
- 지원여부
ㆍ동적 너비 사이즈 : 지원
ㆍ모바일 터치 기능 : 지원
ㆍ슬라이드 페이지 태그 구분 : li
ㆍ컨테이너밸트 기능 : Carousel 기능지원
ㆍ마지막 슬라이드에서 다음 클릭시 다음 슬라이드 움직임 :
싱글이미지방식 : 우측 슬라이드
컨테이너밸트 : 처음으로 좌측 슬라이드
- 비고 : li구분으로 내부의 h태그 사용 불가 하지만 모든 기능이 가장 안정적임
BxSlider
https://www.woothemes.com/flexslider/
- 구조 : 슬라이더 영역만 잡으면 버튼과 페이징은 자동 생성됨
- 지원여부
ㆍ동적 너비 사이즈 : 지원
ㆍ모바일 터치 기능 : 지원
ㆍ슬라이드 페이지 태그 구분 : li
ㆍ컨테이너밸트 기능 : Carousel 기능지원
ㆍ마지막 슬라이드에서 다음 클릭시 다음 슬라이드 움직임 :
싱글이미지방식 : 우측 슬라이드
컨테이너밸트 : 처음으로 좌측 슬라이드
- 비고 :
컨트롤부분과 페이징부분이 div 영역에 쌓여있음,
이것을 제외한 모든 기능이 FlexSlider 상당히 유사함,
옵션에 따라 처음과 끝을 인식해서 다음, 이전 버튼 보임처리
*내용추가
모든 슬라이드는 화면이 로딩된 후에 실행되기 때문에,
가능하다면 사용할때 첫번째 화면을 제외한 나머지를 css로 숨김처리를하고
슬라이드 로드시에 보임처리 하시면 화면 로딩시 화면이 깔끔해집니다.
1
댓글 3개
위의 배너들 전부
처음 로딩 후 자동적으로 롤링이 됩니다.
근데 문제가 좌우나 하단의 버튼 클릭 후엔 롤링이 멈춰 버리는데
이부분은 어떻게들 사용하고 계시나요?
플랙스 슬라이더 사용한지가 삼사년 정도 됬는데
정상적으로 작동이 됬었는데 언젠가부터 모든 사이트의 롤링이 멈춰 버리더라구요
보통 슬라이드 디버깅을 할때 보면 버튼 클릭시의 이벤트를 직접 콘솔에서 입력해서 동작하시는지 먼저 확인해보세요.~
