Touch-friendly Image Puzzle Captcha Plugin - jQuery SliderCaptcha

Touch-friendly Image Puzzle Captcha Plugin - jQuery SliderCaptcha
File Size: 12.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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.


How to use it:

1. Load the dependencies in the document.

<link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="" 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 class="card-body">
    <div id="captcha"></div>

4. Initialize the plugin and done. By default, the plugin will automatically fetches and display a random puzzle image from

  onSuccess: function () {
    window.location.href = '';

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

  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.

  onSuccess: function () {
    // ...
  onFail: function () {
    // ...
  onRefresh: function () {
    // ...      



  • Bugfix


  • Fixed for Firefox


  • Fixed for IE 11

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