반응형
Superslide.js 코드가 나온지 꽤 오랜시간이 지난것 같은데 Bxslider와 함께 많이 활용하는 코드이다.
Superslide은 풀스크린으로 반응형이 지원되서 꽤 활용도가 높은데, 모바일에서 터치가 되지 않아 불편한 점이 있다.
그래서 touchSwipe 코드를 응용해 스와이프하면 슬라이드가 넘어가도록 만들어보았다.
Superslide 기본코드
예시 : www.jqueryscript.net/demo/Full-Screen-Slider-Plugin-Superslides/demo/
<div id="slides">
<div class="slides-container">
<img src="이미지경로">
<img src="이미지경로">
<img src="이미지경로">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<link rel="stylesheet" href="css/superslides.css">
<script src="js/jquery.superslides.js" type="text/javascript"></script>
<script>
$(function() {
$('#slides').superslides({
hashchange: false,
speed: 5000,
animation: 'fade'
});
</script>
Superslide + touchSwipe
기존 Superslide에서 클릭시 넘어가도록 하는 애니메이션이 기본적으로 적용되어있는데 이 부분을 활용하였다.
superslides('animate', 'next');
superslides('animate', 'prev');
<div id="slides">
<div class="slides-container">
<img src="이미지경로">
<img src="이미지경로">
<img src="이미지경로">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<link rel="stylesheet" href="css/superslides.css">
<script src="js/jquery.superslides.js" type="text/javascript"></script>
<script type="text/javascript" src="/theme/basic/js/jquery.touchSwipe.min.js"></script> <!--추가-->
<script>
$(function() {
$('#slides').superslides({
hashchange: false,
speed: 5000,
animation: 'fade'
});
/*touchSwipe*/
$('#slides').swipe({
swipeLeft:function() {
$(this).superslides('animate', 'next');
},
swipeRight:function() {
$(this).superslides('animate', 'prev');
}
});
});
</script>
원본사이트
github.com/nicinabox/superslides
github.com/mattbryson/TouchSwipe-Jquery-Plugin
각각의 코드 다운로드가 귀찮으신 분들을 위해 공유!
반응형
'개발 > js·jquery' 카테고리의 다른 글
[jQuery] jquery ui를 이용한 tooltip 커스터마이징 (툴팁 배경색, 글자색 변경) (2) | 2021.04.16 |
---|---|
[jQuery] 스크롤 따라다니는 퀵메뉴 만들기 (2) | 2021.04.15 |
[jquery] attr()을 활용하여 속성 변경하기 (2) | 2021.03.31 |
[jQuery] 일정 시간이 지나면 자동으로 넘어가는 탭 (2) | 2020.12.15 |
[jQuery] 디바이스 크기별로 jquery 스크립트 다르게 불러오기 (반응형) (2) | 2020.12.15 |
[jQuery] 기본 탭 소스 (2) | 2020.12.12 |
[jQuery] 제이쿼리 항상 최신 버전으로 이용하기 (2) | 2020.12.10 |
[jQuery] Datepicker 한글로 바꾸기, 선택 날짜 범위 지정 (2) | 2020.12.10 |