jquery cycle2 버전 좋구나~ ㅠ.ㅠ

jQuery Cycle2 버전은 1버전에서 많이 개선된거 같다.

이전에는 모바일 환경에 대해서는 지원이 미비했었으나 현재는 아주 만족 ㅠ.ㅠ

 

이런 감동~

간단하게 슬라이드 작업시에는 적용하기 좋은점들이 이미지 아래 해당 슬라이드에 대한 위치값이나

이미지 위로 해당 슬라이드의 위치값을 표시하기가 편해졌으며 간단한 설정으로 적용이 가능한 장점들이 있다.

 

단점도 물론 존재한다.

슬라이드 효과 부분은 현재 세가지 정도만 있으며 물론 제스쳐에 대해서.

나머지 부분은 커스터마이징을 통해서 적용해야 된다는 점.

 

그러나 이런 단점들은 일반적인 슬라이드만을 사용한다면 아무 문제 될것이 없다.

 

해당 플러그인을 사용하기위해서는 http://jquery.malsup.com/cycle2/ 사이트에서 하나의 css 와 두개의 js 파일을

다운받아야 한다.

 

cycle-slideshow.css , jquery.cycle2.js, jquery.cycle2.swipe.js 이며 이 세파일만있으면 간단하게 구성이 간략하다

예제>

<ul class="cycle-slideshow"
                data-cycle-swipe="true"
                data-cycle-swipe-fx="scrollHorz" //기본슬라이드는 hide 이며 스크롤형태로 사용할시 scrollHorz 를 사용
                data-cycle-timeout="5000"
                data-cycle-pager="#mainroll" // 페이징을 보여줄 위치를 설정
                data-cycle-slides="> li" // 스크롤의 경우 기본 img 이며 아래와 같이 li 태그를 스크롤 시킬시 설정을 변경하면 된다.

                                       //   물론 div 부분도 가능하다는점

data-cycle-pager-template="<li><a href='#'></a></li>"> 페이징을 나타내기 위한 부분이며 css 로 형태를 지정하면 된다.
       <li><a href="링크"><img src="이미지경로" alt="" /></a></li>

                    <li><a href="링크"><img src="이미지경로" alt="" /></a></li>
                    <li><a href="링크"><img src="이미지경로" alt="" /></a></li>
</ul>

<div id="mainroll"></div>