ixSlideMax()

Type : jQuery Plugin

Support : 0.3

Return : jQuery

  • 슬라이드 베너 Plugin (carousel)
    다양한 옵션 적용으로 여러가지 형태로 변형하여 사용할 수 있다.
  • .ix-touch-area class로 터치영역을 변경할 수 있다.
    설정하지 않으면 .ix-list-viewport 가 touch 영역이 된다. v0.4.3~ 지원
    ※한번 적용된 대상에는 "clear" 하기 전에는 다시 적용되지 않는다.

Options

대상 Node의 inline 속성으로 설정하는 data-ix-options의 Properties
property description required default ver
view-length 화면에 보여지는 아이템 갯수 설정
이 설정을 기준으로 움직임의 양이나 좌표를 계산하게 된다.		 ✔ 1 0.3
move-length 한번에 움직이는 아이템 갯수 설정
view-length 보다 크게 설정할 수 없다.		 view-length 설정값 0.3
loop 아이템들을 끊기지 않고 연결해서 보여주도록 설정 true 0.3
auto-play 일정시간이 지나면 자동 슬라이드 되도록 설정 false 0.3
delay auto-play 설정시 자동 슬라이드 간격, 1000/1초 4000 0.3
motion-type 슬라이드 모션 방식 설정 ( "slide", "none" ) slide 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" ) horizontal 0.3
datum-point 기준점 설정, 시작되는 좌표
px, % 단위 모두 사용 가능 ("ix-list-viewport" 기준)		 0 0.3
default-index 기본으로 보여져야 하는 아이템의 index 설정
아이템갯수 보다 크게 설정하면 적용되지 않는다.		 0 0.3
item-size 아이템 하나의 사이즈 (px), margin 제외 0.3
item-margin 아이템 양쪽의 마진 (px), ex)10px 10px 0.3
viewport-ratio class="ix-list-viewport" 대상의 가로 세로 비율 설정
해당 옵션을 설정하게 되면 이미지가 로드 되기전에 viewport의 사이즈를 설정할 수 있다.
설정 시점에 보이지 않는 영역에 있다면 제대로 설정하지 못한다.
ex)100 70		 0.3
opposite auto-play설정시 역방향으로 슬라이드 되도록 설정 false 0.3
paging "view-length"에 맞춰 페이징 처리.
※loop:false 일때만 설정되고, view-length와 move-length가 같을때 제대로 계산된다.		 false 0.3
correct-endpoint view-length보다 아이템이 화면의 조금더 보여질때, 마지막 아이템의 끝을 "ix-list-viewport"의 사이즈의 맞춰 좌표를 보정 하도록 설정.
px, % 단위 사용 가능 ("ix-list-viewport" 기준) v0.4.3~ 지원
※loop:false, paging:false 일때만 동작한다.		 false 0.3
include-margin 아이템 사이즈를 계산할때 margin을 포함하여 계산하도록 설정
주로 아이템은 % margin은 px 처럼 단위를 따로 설정 해야 할때 사용.
※css의 설정한 ix-list-item의 사이즈에서 -margin값 만큼 작게 표시된다.		 false 0.3
bounce loop:false일때 모바일에서 드레그시 마지막 아이템에서 bounce 되는 설정 true 0.3
touch-disable 모바일에서 Touch Event 비활성화 설정 false 0.3.4
swipe-sensitivity swipe 민감도 설정, 1보다 커질수록 둔감해지고 작아질수록 민감해진다. 0.5 0.4

Methods

  • ixSlideMax( options ) : jQueryver 0.3~

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

  • ixSlideMax( 'next', moveLength ) : jQueryver 0.3~

    아이템의 다음 으로 슬라이드 시킨다.
    • moveLength : Int
      설정시 해당 수치만큼 아이템이 이동한다, 설정하지 않으면 기본설정대로 이동한다, v0.4.3~ 지원
      ※view-length 보다 크게 설정하면 동작하지 않는다.

  • ixSlideMax( 'prev', moveLength ) : jQueryver 0.3~

    아이템의 이전 으로 슬라이드 시킨다.
    • moveLength : Int
      설정시 해당 수치만큼 아이템이 이동한다, 설정하지 않으면 기본설정대로 이동한다, v0.4.3~ 지원
      ※view-length 보다 크게 설정하면 동작하지 않는다.

  • ixSlideMax( 'startTimer' ) : jQueryver 0.3~

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

  • ixSlideMax( 'stopTimer' ) : jQueryver 0.3~

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

  • ixSlideMax( 'resize' ) : jQueryver 0.3~

    Viewport, Item 등등의 사이즈 재설정 ※inline style은 모두 삭제된후 css의 정의된 class를 기준으로 사이즈가 재설정 된다.

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

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

  • ixSlideMax( 'getCurrentIndex', total ) : Intver 0.3~

    첫번째 대상의 현재 선택된 Item의 index반환
    • total : Boolean
      true 설정시 data-idx 반환, v0.4.3~ 지원

  • ixSlideMax( 'getTotalLength' ) : Intver 0.3~

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

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

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

  • ixSlideMax( 'enable' ) : jQueryver 0.3.7~

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

  • ixSlideMax( 'disable' ) : jQueryver 0.3.7~

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

  • ixSlideMax( 'clear' ) : jQueryver 0.3~

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

Events

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

Example