JQuery Swipe Plugin with css3

Posted By : Hema Chauhan | 28-Sep-2017

jquery

A mobile friendly off-canvas side navigation made with jQuery and CSS that allowing you to show and hide the side menu with touch swipe trigger using jQuery touchSwipe plugin.this is a brand-new jQuery slider plugin for making a responsive, touch-enabled, customizable image carousel slider with cool transition effects based on CSS3 animations. First of all you need to setting of cards like card-deck by using HTML and CSS as show in image, and then apply mentioned process given below. For this need to add this Plugin : TouchSwipe Jquery Plugin and a little part of Script below :

$(".card-method").swipe({
  swipeStatus : function(event, phase, direction, distance, duration, fingers) {
    if (phase != "cancel" && phase != "end") {
      if (direction == "left") {
        if (distance > 30) { // this is swipe distance, you can adjust it acording to your requirment.
          $(this).removeClass("direction");
          $(this).removeClass("animate-right");
          $(this).addClass("animate-left");
        } else {
          $(this).addClass("direction");
          $(this).removeClass("animate-left");
          $(this).removeClass("animate-right");
        }
      } else if (direction == "right") { // this is right swipe direction
        if (distance > 30) { // this is swipe distance, you can adjust it acording to your requirment.
          $(this).removeClass("direction");
          $(this).addClass("animate-right");
          $(this).removeClass("animate-left");
        } else {
          $(this).addClass("direction");
          $(this).removeClass("animate-left");
          $(this).removeClass("animate-right");
        }
      }
    }
    if (phase == "cancel"){ // this is for back to starting point if you do not want to move left and right.
      $(this).removeClass("animate-left");
      $(this).removeClass("animate-right");
      $(this).addClass("direction");
    }
    if (phase == "end") { // this is for end point when you touch end
      if (direction == "left") { // this is left swipe direction
        $(this).removeClass("animate-left");
        $(this).addClass("card-left-success");
        $(this).parent().children(':last-child').prev().addClass('active-ele');
        $(this).remove(); 
      } else if (direction == "right") { // this is right swipe direction
        $(this).removeClass("animate-right");
        $(this).addClass("card-right-success");
        $(this).parent().children(':last-child').prev().addClass('active-ele');
        $(this).remove();
      }else {
        $(this).removeClass("animate-left");
        $(this).removeClass("animate-right");
        $(this).addClass("direction");
      }
    }
  },
  threshold : 0  //Default is 75px, set to 0 so that swipe triggers in any distance
});

Include this css into your style.css :

.card-method{ -webkit-transition:all linear 0.3s; outline: solid 1px transparent; /* for edge smooth when animate your card */ } .card-method.direction { -webkit-transform: translateX(0px) rotate(0deg); } .card-method.animate-left { -webkit-transform: translateX(-20%) rotate(-10deg); } .card-method.card-left-success { -webkit-transform: translateX(-200%) rotate(-100deg); } .card-method.animate-right { -webkit-transform: translateX(20%) rotate(10deg); } .card-method.card-right-success{ -webkit-transform: translateX(200%) rotate(100deg); }

Thanks.