/SwipeMe

Swipe me is a jQuery based library can be used to make touch supported slidable element.

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

SwipeMe

SwipeMe is a jQuery based library can be used to make touch supported slidable element.

Key functionality
  • Trigger functions with left or right slide.
  • Dynamically change background color opacity with slide distance.
  • Accept minimum range of slide to trigger function execution
Simple Demo

Usage

  1. Add jQuery and slideMaster to your html page.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/iAmAbhishekJaiswal/slideMaster@main/slideMaster.js"> </script>
  2. Create object of necessary data related to slide.
    var slideData={
               rightSlideFunction : function1,
               leftSlideFunction : function2,
               rightSlideColor :"#5cb85c",
               leftSlideColor  : "#f0ad4e",
               range: 0.6                     
               };
  3. Here, rightSlideFunction and leftSlidefunction define function to call with right and left slide respectively.

    rightSlideColor and leftSlideColor define background color with right and left slide respectively. It accept only hex color code.

    range define the minimum distance to trigger function. It accept value between 0 to 1 . (exp:- 0.7 represent 70% of element width). range is optional and can be omitted. In this case, it used default value 0.6.

  4. Now call slideMaster with above object as parameter as following :-
    $('.className').slideMaster(slideData);
       

    Here replace className with element's className which you want to make slidable.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.