ixOverlayList()

Type : jQuery Plugin

Support : 0.3

Return : jQuery

  • Overlay 되는 배너 Plugin
  • .ix-touch-area class로 터치영역을 변경할 수 있다.
    설정하지 않으면 .ix-list-viewport 가 touch 영역이 된다. v0.4.3~ 지원
    ※한번 적용된 대상에는 "clear" 하기 전에는 다시 적용되지 않는다.

Options

대상 Node의 inline 속성으로 설정하는 data-ix-options의 Properties
property description required default ver
loop 아이템들을 끊기지 않고 연결해서 보여주도록 설정 true 0.3
auto-play 일정시간이 지나면 자동 슬라이드 되도록 설정 false 0.3
delay auto-play 설정시 자동 슬라이드 간격, 1000/1초 4000 0.3
motion-type 슬라이드 모션 방식 설정 ( "overlay", "none", "slide", "mask" )
motion-type="slide", "mask" :v0.4~ 지원
※motion-type="slide", "mask"에서 아이템 갯수가 2개 이하이면 loop설정이 false로 바뀐다.		 overlay 0.3
duration motion-type이 slide일때 animate 시간, 1000/1초 400 0.3
easing motion-type이 slide일때 animate easing값 설정
ixSnack.easing.js, jquery.easing.js 필요		 ease 0.3
axis 슬라이드 방향축이 가로인지 세로인지 설정 ( "horizontal", "vertical" )
motion-type="slide", "mask" 에서만 사용		 horizontal 0.4
default-index 기본으로 보여져야 하는 아이템의 index 설정
아이템갯수 보다 크게 설정하면 적용되지 않는다.		 0 0.3
item-size 아이템 하나의 사이즈 (px), margin 제외
※motion-type="slide" 전용옵션		 0.4
item-margin 아이템 양쪽의 마진 (px), ex)10px 10px
※motion-type="slide" 전용옵션		 0.4
viewport-ratio class="ix-list-viewport" 대상의 가로 세로 비율 설정
해당 옵션을 설정하게 되면 이미지가 로드 되기전에 viewport의 사이즈를 설정할 수 있다.
설정 시점에 보이지 않는 영역에 있다면 제대로 설정하지 못한다.
ex)100 70		 0.3
opposite auto-play설정시 역방향으로 슬라이드 되도록 설정 false 0.3
include-margin 아이템 사이즈를 계산할때 margin을 포함하여 계산하도록 설정
주로 아이템은 % margin은 px 처럼 단위를 따로 설정 해야 할때 사용.
※css의 설정한 ix-list-item의 사이즈에서 -margin값 만큼 작게 표시된다.
※motion-type="slide" 전용옵션		 false 0.4
touch-disable 모바일에서 Touch Event 비활성화 설정 false 0.3.4
swipe-sensitivity swipe 민감도 설정, 1보다 커질수록 둔감해지고 작아질수록 민감해진다. 0.5 0.4

Methods

  • ixOverlayList( options ) : jQueryver 0.3~

    슬라이드 기본적용
    • options : Object
      각종 옵션들 설정, 설정하지 않으면 기본 옵션이 설정된다, Property는 카멜표기법 사용
      옵션 항목들은 "Options" 참조
      ※옵션설정은 되도록 inline으로 data-ix-options속성에 설정하길 권장한다.

  • ixOverlayList( 'next' ) : jQueryver 0.3~

    아이템의 다음 으로 슬라이드 시킨다.

  • ixOverlayList( 'prev' ) : jQueryver 0.3~

    아이템의 이전 으로 슬라이드 시킨다.

  • ixOverlayList( 'startTimer' ) : jQueryver 0.3~

    auto-play:true 설정 후 타이머를 멈췄다 다시 실행 할때 사용

  • ixOverlayList( 'stopTimer' ) : jQueryver 0.3~

    auto-play:true 설정 후 타이머를 멈출때 사용

  • ixOverlayList( 'resize' ) : jQueryver 0.4~

    Viewport, Item 등등의 사이즈 재설정
    ※inline style은 모두 삭제된후 css의 정의된 class를 기준으로 사이즈가 재설정 된다.
    ※motion-type="slide", "mask" 에서만 동작한다.

  • ixOverlayList( 'changeIndex', index, direction ) : jQueryver 0.3~

    설정한 index의 아이템 위치로 슬라이드 이동
    • index : Int
      변경할 아이템의 index 수치
      ※전체 아이템 갯수보다 크거나 0보다 작게 설정하면 동작하지 않는다.
    • direction : String
      slide 방향까지 설정하고 싶을때 사용 ('next', 'prev')
      일반적인 경우는 설정하지 않아도 된다, v0.6.0~ 지원

  • ixOverlayList( 'getCurrentIndex' ) : Intver 0.3~

    첫번째 대상의 현재 선택된 Item의 index반환

  • ixOverlayList( 'getTotalLength' ) : Intver 0.3~

    Item의 갯수 반환 (복제된 Item 제외)

  • ixOverlayList( 'getComputedOption', property ) : Object*ver 0.4~

    현재 적용된 option 반환
    • property : String
      설정시 해당 propety의 값만 반환
      설정하지 않으면 Object로 모든 option반환

  • ixOverlayList( 'enable' ) : jQueryver 0.3.7~

    Controller Button의 동작과 Touch Device에서 TouchEvent를 비활성화 시킨다.

  • ixOverlayList( 'disable' ) : jQueryver 0.3.7~

    Controller Button의 동작과 Touch Device에서 TouchEvent를 활성화 시킨다.
    ※touch-disable=true 가 설정되어 있으면 TouchEvent 활성화는 동작하지 않는다.

  • ixOverlayList( 'clear' ) : jQueryver 0.3~

    슬라이드 적용 해제, 등록된 이벤트들도 모두 삭제되어 초기화 된다.

Events

No. type description property ver
1 ixOverlayList:init 초기 설정시 전달 되는 Event
  • currentIndex: 현재 item의 index
  • totalLength: 전체 item 갯수
  • endpoint: loop:false면서 현재 화면이 마지막 일때 true 반환
 0.3
2 ixOverlayList:touchStart Touch Device에서 Swipe를 하기위하여 Touch가 시작될때 전달 되는 Event
  • currentIndex: 현재 item의 index
  • totalLength: 전체 item 갯수
  • displacement: item이 itemSize대비 이동한 비율 0~1, ※v0.4~ 지원
 0.3
3 ixOverlayList:touchMove Touch Device에서 Swipe를 하기위하여 TouchMove가 발생할때 전달 되는 Event
motion-type "slide", "mask" 에서만 발생
  • currentIndex: 현재 item의 index
  • totalLength: 전체 item 갯수
  • displacement: item이 itemSize대비 이동한 비율 0~1
 0.4
4 ixOverlayList:touchEnd Touch Device에서 Swipe를 끝내며 Touch가 끝났을때 전달 되는 Event
  • currentIndex: 현재 item의 index
  • totalLength: 전체 item 갯수
  • displacement: item이 itemSize대비 이동한 비율 0~1, ※v0.4~ 지원
 0.3
5 ixOverlayList:slideStart Item의 Slide가 시작될때 전달 되는 Event
  • currentIndex: 현재 item의 index
  • totalLength: 전체 item 갯수
  • direction: slide방향 (none, next, prev), ※v0.3.7~ 지원
  • displacement: item이 itemSize대비 이동한 비율 0~1, ※v0.4~ 지원
 0.3
6 ixOverlayList:change Item이 Slide되어 index가 변경 되었을시 전달 되는 Event
  • currentIndex: 현재 item의 index
  • totalLength: 전체 item 갯수
  • endpoint: loop:false면서 현재 화면이 마지막 일때 true 반환
  • direction: slide방향 (none, next, prev), ※v0.3.7~ 지원
  • displacement: item이 itemSize대비 이동한 비율 0~1, ※v0.4~ 지원
 0.3
7 ixOverlayList:slideEnd Item의 Slide가 끝났을때 전달 되는 Event
index가 변경 되지 않아도 무조건 호출된다.
  • currentIndex: 현재 item의 index
  • totalLength: 전체 item 갯수
  • endpoint: loop:false면서 현재 화면이 마지막 일때 true 반환
  • direction: slide방향 (none, next, prev), ※v0.3.7~ 지원
  • displacement: item이 itemSize대비 이동한 비율 0~1, ※v0.4~ 지원
 0.3

Example