Touch-enabled Swiper With Inertial Motion - vmSwipe

vmSwipe is a minimal jQuery swiper plugin used to scroll through a group of block elements with a configurable momentum scrolling effect.

The plugin supports both directions (horizontal & vertical) and works both on mobile (touch swipe) & desktop (mouse drag). Without the need of jQuery UI draggable widget.

How to use it:

1. Import jQuery library and the jQuery vmSwipe plugin's files into the html file.

<link rel="stylesheet" href="css/vmSwipe.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/jquery.vmSwipe.min.js"></script>

2. Initialize the plugin on a group of block elements to create a horizontal swiper.

<div class="example">
  <div class="swipe-block">
    <div class="vm-swipe">
      <div class="block">
        Block 1
      </div>
      <div class="block">
        Block 2
      </div>
      <div class="block">
        Block 3
      </div>
      ...
    </div>
  </div>
</div>

$('.example').vmSwipe();

3. Change the default direction to 'vertical'.

$('.example').vmSwipe({ 
  direction: 'vertical' 
});

4. If you want to create a diagonal swipe effect:

$('.example').vmSwipe({ 
  direction: 'both' 
});

5. Config the Inertial Motion on mobile device with the following options.

$('.example').vmSwipe({ 
  inertiaMaxWidth: 1030,
  inertiaThreshold: 25
});

6. API methods

// initialize the plugin with settings
$('.example').vmSwipe(settings);

// refresh settings
$('.example').vmSwipe(refresh);

// destroy the plugin
$('.example').vmSwipe(destroy);

---

This awesome jQuery plugin is developed by vmasterov. For more Advanced Usages, please check the demo page or visit the official website.