[jQuery] 반응형 이미지 슬라이더에 터치 스와이프 가능하게 하기(superslide, touchSwipe)

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

 

 

 

각각의 코드 다운로드가 귀찮으신 분들을 위해 공유!

 

superslide+touchSwipe.zip

0.03MB