Jquery Flipster는 jquery 기반으로 좋은 슬라이드를 제공해준다.
잘만 사용한다면 다양한 웹 페이지에 추가해 사용할 수 있다.
jQuery Flipster Github 페이지에서 기반 CSS와 JS, 데모 파일을 받아볼 수 있다.
기능을 직접 확인하고 싶다면 Demo를 확인해보면 된다.
총 네 개의 슬라이드가 있다.
- 1.가로형의 Coverflow
- 2.원형과 네비게이션을 활용할 수 있는 Carousel
- 3.반원형의 Wheel
- 4. 띠 형태의 Flat
적용 방법
먼저 <head>에 CSS와 JS, jQuery를 적용해주어야 한다.
CSS와 JS는 개발자님의 Git에서 구할 수 있다.
<!-- Flipster css -->
<link rel="stylesheet" href="경로/jquery.flipster.min.css">
<!-- jQuery -->
<script src="경로/jquery.min.js"></script>
<!-- Flipster js -->
<script src="경로/jquery.flipster.min.js"></script>네 구성 중에 하나를 선택해 활용해보자.
구조는 네 구성 모두 비슷하다.
carousel
<div id="carousel">
<ul class="flip-items">
<li data-flip-title="이름" data-flip-category="분류">
<!-- 내부요소 -->
</li>
</ul>
</div>
<script>
var carousel = $("#carousel").flipster({
style: 'carousel',
spacing: -0.5,
nav: true,
buttons: true,
});
</script>기본적으로 다음과 같이 설정할 수 있다. 대상을 설정하고 javascript로 flipster를 걸고 정의하면 된다. 정의 할때 다양한 옵션이 있는데 다음과 같다.
itemContainer: 'ul',
[string|object]
아이템을 담는 컨테이너를 지정한다. 기본 ul 태그itemSelector: 'li',
[string|object]
컨테이너의 각 아이템을 지정한다. 기본 li 태그start: 'center',
['center'|number]
초기 시작 지점을 선택한다. center로 하면 중심으로 초기화 된다.fadeIn: 400,
[milliseconds]
아이템 애니메이션 시간을 지정한다.loop: false,
[true|false]
첫 아이템에서 마지막 아이템을 연결할 지 여부.autoplay: false,
[false|milliseconds]
일정 시간이 지나면 다음 아이템으로 자동 진행.pauseOnHover: true,
[true|false]
마우스를 올렸을 때 자동 진행이 정지하도록 설정.style: 'coverflow',
[coverflow|carousel|flat|...]
스타일 선택.spacing: -0.6,
[number]
아이템 간 거리를 지정한다. 음수는 서로 겹쳐진다.click: true,
[true|false]
아이템을 클릭했을 때 그 아이템으로 넘어가도록 설정.keyboard: true,
[true|false]
키보드로 아이템 간에 이동할 수 있도록 설정.scrollwheel: true,
[true|false]
마우스 스크롤을 통해 아이템 변경이 가능하도록 설정.touch: true,
[true|false]
터치 가능한 기기에서 터치로 아이템 변경이 가능하도록 설정.nav: false,
[true|false|'before'|'after']
아이템 간의 분류를 기반으로 네비게이션을 보여주도록 만든다.buttons: false,
[true|false|'custom']
다음이나 이전 아이템으로 이동하는 버튼을 생성할지 여부.
커스텀으로 설정할 수도 있다.buttonPrev: 'Previous',
buttonNext: 'Next',
[text|html]
버튼에서 커스텀으로 설정할 경우 보여지게 될 내용 설정.onItemSwitch: false
[function]
아이템이 변경될 때마다의 기능을 설정할 수 있다.
기본적으로 [currentItem, previousItem]을 매개변수로 활용할 수 있다.
다양하게 설정할 수도 있지만 가장 활용하기 좋은 옵션은 onItemSwitch()이다.
약간의 Javascript를 활용하면 아이템이 변경될 때마다의 이벤트를 추가할 수 있다.
예시
<div id="carousel">
<ul class="flip-items">
<li><img src="{% static 'img/book-img.jpg' %}" value="15001"></li>
<li><img src="{% static 'img/book-img.jpg' %}" value="15002"></li>
<li><img src="{% static 'img/book-img.jpg' %}" value="15003"></li>
<li><img src="{% static 'img/book-img.jpg' %}" value="15004"></li>
<li><img src="{% static 'img/book-img.jpg' %}" value="15005"></li>
<li><img src="{% static 'img/book-img.jpg' %}" value="15006"></li>
</ul>
</div>간단하게 각 아이템에 이미지 링크와 value값을 추가했다.
아이템이 변경되면 value에 따라 특정 html 부분이 변경되도록 설정할 수 있다.
carousel을 이용해 간단하게 설정할 수 있지만 이렇게만 하면 기능이 작동하지 않는다. Javascript를 추가해주자.
var carousel = $("#carousel").flipster({ //대상에 flipster 생성
style: 'carousel',
spacing: -0.5,
nav: false, // 내비게이션 제거
buttons: true, // 버튼은 추가
autoplay: 5000, //5초마다 다음 아이템으로 이동
loop:true, // 루프 활성화
start: 0, // 0번 아이템 (첫번째)부터 시작
onItemSwitch : function(current){//current는 현재 아이템에 해당한다.
value = current.getElementsByTagName('img')[0].getAttribute("value");
// 현재 아이템의 img가 가지고 있는 value값을 가져온다.
change_info(value)
// 가져온 값을 통해 변경을 지정하는 함수로 전달한다.
},
});여기까지 하면 값이 변경될때마다 현재 아이템의 값을 가져와서 변경이 된다.
하지만 처음 페이지에 접근하면 아이템이 선택되지 않은 상태인데
$(document).ready(function(){
change_info("15001");
});다음처럼 페이지에 접근할 때 기능으로 값을 지정해주면 된다.
