Touch-friendly Image Puzzle Captcha Plugin - jQuery SliderCaptcha

A touch-friendly and self-hosted image puzzle captcha jQuery plugin to test if you are Human/Robot or Not.

To prove you’re Not a robot, drag the slider to make the puzzle piece coincided with the main picture.

Dependencies:

How to use it:

1. Load the dependencies in the document.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"></script>

2. Load the jQuery SliderCaptcha plugin's files in the document.

<link href="slidercaptcha.css" rel="stylesheet">
<script src="longbow.slidercaptcha.js"></script>

3. Create the HTML for the puzzle captcha component.

<div class="slidercaptcha card">
  <div class="card-header">
    <span>Drag To Verify</span>
  </div>
  <div class="card-body">
    <div id="captcha"></div>
  </div>
</div>

4. Initialize the plugin and done. By default, the plugin will automatically fetches and display a random puzzle image from https://picsum.photos/.

$('#captcha').sliderCaptcha({
  onSuccess: function () {
    window.location.href = 'https://www.jqueryscript.net';
  }
});

5. All default plugin options. Override the following option values to customize the puzzle capcha component.

$('#captcha').sliderCaptcha({
  width: 280,
  height: 155,
  sliderL: 42,
  sliderR: 9,
  offset: 5, 
  loadingText: 'Loading...',
  failedText: 'Try It Again',
  barText: 'Slide the Puzzle',
  repeatIcon: 'fa fa-repeat',
  maxLoadCount: 3,
  localImages: function () { // uses local images instead
    return 'images/Pic' + Math.round(Math.random() * 4) + '.jpg';
  }
});

6. More callback functions.

$('#captcha').sliderCaptcha({
  onSuccess: function () {
    // ...
  },
  onFail: function () {
    // ...
  },
  onRefresh: function () {
    // ...      
  }
});

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