아래와 같은 carousel(슬라이드 갤러리) 을 반응형 웹에 적용하다 보면, 흔히 부딪히는 문제가 손가락 터치로 반응하도록 하는 문제다.
사실, 모바일에서 좌우측의 작은 화살표만으로 터치 반응을 주는 것은 위험하다. 사용자들에게는 아주 짜증나는 경험이 될 것이다.
(물론, 개인적으로 나는 이런 레이아웃이 그리 좋다고는 생각하지 않는다. 그냥 ‘홍보영상’ 링크만 타고 들어가면 될 것을 뭐하러 짜증나게 저 슬라이드를 이리저리 돌려보겠는가. 하지만, 일부 디자이너나 기획자들이 이를 막무가내로 요구하면 딱히 대안이 없다….
)
jquerymobile의 swipteleft, swipright를 쓰지 않고 모바일에서 손가락 터치에 반응하도록 하는 방법은 아래와 같다.
jquery 모바일 터치 이벤트 중 하나인 touchstart와 touchmove를 사용하면 간단하다.
'nextSlide'를 다음화면으로 슬라이드하는 이벤트, 'prevSlide'를 이전 화면으로 슬라이드하는 이벤트라 가정하면,
var startX = {};
var endX = {};
$sliderControls.prev().bind({
'touchstart':function(e){
startX = event.touches[0].pageX;
},
'touchmove':function(e){
endX = event.touches[0].pageX;
var fnX = startX - endX;
if(fnX>0) { $slider.trigger( 'nextSlide' ); }
if(fnX <= 0) { $slider.trigger( 'prevSlide' ); }
}
});
위와 같이 간단하게 구현할 수 있다. touchstart는 모바일 터치하는 순간의 좌표값을 반환할 때 사용하고, touchmove는 손가락을 떼는 순간의 좌표값을 반환할 수 있으므로, 이 두 개를 비교해 touchmove의 값이 크면 손가락을 오른쪽으로 밀어낸 경우이고, touchmove의 값이 작다면 손가락을 왼쪽으로 당긴 경우이다.
이 값을 비교해 값이 +이면 'nextSlide'를 호출하고, 값이 –이면 'prevSlide'를 호출하면 간단하다.
Flow Slider is very easy to use. To create you first slider, add some HTML content to your page with the parent element's id set to slider. Then add the following JavaScript line, and your first slider is ready.
1
FlowSlider("#slider");
Creating a slider with custom options is easy as well. In the next example we create a slider that immediately after initialization starts to slide from the beginning startPosition: 0.0to the middle position: 0.5. We also set margins at the beginning and at the end of the slider marginStart: 50, marginEnd: 100 to create some free space for the content. As the last tweak, we change the default controller's "Hover" options. Specifically we change the "dead" area of the mouse—mouse movements will start to move the slider immediately from the left side mouseStart: 0, but on the right side there will be created a dead area where mouse is not active mouseEnd: 100.
1
2
3
4
5
6
7
8
9
10
FlowSlider("#slider", {
startPosition: 0.0,
position: 0.5,
marginStart: 50,
marginEnd: 100,
controllerOptions: [{
mouseStart: 0,
mouseEnd: 100
}]
});
The Flow Slider plugin is bundled with many animation options (read more about Animations). You can supply any well defined transition function as the transition option to use your custom transitions. See below how to create a slider with your custom animation transition function.
1
2
3
4
5
6
7
8
9
FlowSlider("#slider", {
animation: "Transition",
animationOptions: {
transition: newFlowSlider
.Transition
.CubicBezier(0.345, 1.650, 0.535, 0.795)
.transition
}
});
As the last example we will create a slider that is not controlled by mouse movements but by scroll wheel and left ← & right → keyboard buttons.
1
2
3
FlowSlider("#slider", {
controllers: ["Wheel", "Key"]
});
Want to try it yourself? Then download Flow Slider plugin with more examples and create your own sliders. To learn more about Flow Slider see our Developer Pages.
jquery.touchslider.min.js