JQuery 스 와이프 - jQuery seu waipeu

Question

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Swiper, along with other great components, is a part of Framework7 - a fully-featured framework for building iOS & Android apps. Swiper is also a default slider component in the Ionic Framework.

jQuery Mobile swipe event is fired when we swipe in the element area. We can use this event for different purposes.

Syntax:

jQuery( ".selector" ).on( "swipe", function( event ) {  } )

Approach: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/
jquery.mobile-1.4.5.min.css” />
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example 1:

HTML

<!DOCTYPE html>

<html>

<head>

<<!DOCTYPE html>1 <!DOCTYPE html>2<!DOCTYPE html>3<!DOCTYPE html>4 <!DOCTYPE html>5<!DOCTYPE html>3

<!DOCTYPE html>7 <!DOCTYPE html>8

<<2 <3<!DOCTYPE html>3

<5<6>

<9<2>

<<2 <3<!DOCTYPE html>3

html8>

<9<2>

<<2 >8<!DOCTYPE html>3 0>

<5 3

4 5

<5 7

<9<2>

<9head>

<<7>

<head1>

<5<head5head6head5>

<5<>1>2>1>

<9head1>

< 1 2<!DOCTYPE html>3 4 5<!DOCTYPE html>3 7 8 1>

This demo shows how you can use the swipe event to navigate between pages. We are using single HTML files for each page. Here you can see the JavaScript and CSS source. On each of the demo pages you can see the page markup as well.

Open swipe page demo

Description: Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration.

jQuery( window ).on( "swipe", function( event ) { ... } )

Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration but these can be configured:

$.event.special.swipe.scrollSupressionThreshold (default: 10px) – More than this horizontal displacement, and we will suppress scrolling.
$.event.special.swipe.durationThreshold (default: 1000ms) – More time than this, and it isn't a swipe.
$.event.special.swipe.horizontalDistanceThreshold (default: 30px) – Swipe horizontal displacement must be more than this.
$.event.special.swipe.verticalDistanceThreshold (default: 30px) – Swipe vertical displacement must be less than this.

The swipe event can also be extend to add your own logic or functionality. The following methods can be extended:

$.event.special.swipe.start Default:

1

2

3

4

5

6

7

8

9


function( event ) {



  var data = event.originalEvent.touches ?
      event.originalEvent.touches[ 0 ] : event;
  return {
      time: ( new Date() ).getTime(),
      coords: [ data.pageX, data.pageY ],
      origin: $( event.target )
    };
}

This method recieves a touchstart event and returns an object of data about the starting location.

$.event.special.swipe.stop Default:

1

2

3

4

5

6

7

8


function( event ) {
  var data = event.originalEvent.touches ?



      event.originalEvent.touches[ 0 ] : event;
  return {
      time: ( new Date() ).getTime(),
      coords: [ data.pageX, data.pageY ]
    };
}

This method recieves a touchend event and returns an object of data about the ending location.


function( event ) {
  var data = event.originalEvent.touches ?
      event.originalEvent.touches[ 0 ] : event;
  return {
      time: ( new Date() ).getTime(),
      coords: [ data.pageX, data.pageY ]
    };
}

0 Default:

1

2

3

4

5

6

7

8

9


function( start, stop ) {
  if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
    Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
    Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
 
    start.origin.trigger( "swipe" )
      .trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
  }
}