미리보기 다운로드
심플한 가로 슬라이더입니다.
엄청난 슬라이드 효과는 없습니다. 그냥 모바일에서 터치 슬라이딩하면 스와이핑 되고, 마지막 슬라이드에서 터치 드래그 하면 다시 처음으로 이어지는 슬라이드입니다.
자동으로 시간에 맞춰 슬라이딩 되고, 슬라이드 반복을 제어 할 수 있습니다.
데스크탑에서 클릭 스와이핑 기능을 제어할 수 있습니다.
슬라이딩 되는 모션을 'easeOutQuart'과 같이 꾸미고 싶으시다면 jquery.easing.js 를 같이 사용하시어 설정하시면 됩니다.
먼저 <head> 안에 플러그인을 넣습니다.
<script type="text/javascript" src="./js/vinyli.viSimpleSlider.js"></script>
그리고 슬라이드를 감쌀 div를 만들고 id를 부여합니다.
그 안에 ul을 만들어 li 안에 슬라이드 할 것들을 넣습니다.
<div id="testDiv">
<ul>
<li data-link="링크 주소 1">
<img src="이미지 경로 1">
</li>
<li data-link="링크 주소 2">
<img src="이미지 경로 2">
</li>
</ul>
</div>
그리고 마지막으로 </body> 바로 위에 실행 코드를 넣습니다.
위에 div에 부여한 id를 찾아 실행하게 됩니다.
<script>
$('#testDiv').viSimpleSlider({
ease : 'easeOutQuart',
autoPlay : true,
autoTime : 6000,
speed : 400,
mobileSwipe: true,
desktopSwipe : true
});
</script>
추가 옵션은 ease, indicate, arrow, autoPlay, autoTime, speed, loop, mobileSwipe, desktopSwipe 이 있으며 미리보기를 클릭하면 자세한 사용법이 나옵니다.
미리 보기 : http://bongsunga.com/blog/labfile/plugin.viSimpleSlider/
그.. 터치가 인식이 안되요,. 앱에서 접속해서 확인해봣는데, 미리보기인곳에서도 안되더라구요. 덕분에 슬라이드는 구현 했습니다. 터치도 된다면 좋을꺼 같아요
확인해보고 업데이트 수정해 놓겠습니다~
감사합니다.
업데이트 하였습니다. 현재 모바일과 pc에서 터치 슬라이드가 따로 설정할 수 있도록 옵션을 구분해 놓았습니다. 테스트 결과 미리보기 사이트가 모바일에서 정상적으로 터치 슬라이드 되고 있습니다.
혹여 미리보기가 모바일에서 터치 스와이프가 안되신 다면 다시 말씀 부탁드리겠습니다.
감사합니다.
우와.. 저도 언제 이렇게 구현할 수 있을지.. 잘 보고갑니다~
알고보면 어렵지 않은거예요~ 저도 간단한 구조밖에 구현하지 못합니다 ㅎ
공부하시면 금방 하실꺼예요. 몇가지 규칙만 따라 만들고 하면요~