Minimal Image Panning Library – LC-Mouse-Drag

Preview:

Description:

A tiny image panning JavaScript library that provides a smooth drag-to-pan functionality on images.

Supports both mouse drag and touch swipe events.

How to use it:

1. Import the lc-mouse-drag.js JavaScript library into the document.

<script src="lc-mouse-drag.js"></script>

2. Initialize the library on the image container as follows:

<div id="inner">
  <img src="demo.webp" />
</div>

lc_mouseDrag('#inner');

3. Determine the animation delta when ending dragging. Default: 0.3.

lc_mouseDrag('#inner', 0);

4. Disable X-axis and/or Y-axis dragging. Default: false.

lc_mouseDrag('#inner', 0, true, false);

5. Important CSS rules for desktop.

body:not(.lc_mousedrag_is_mobile) #inner {
  overflow: hidden;
  cursor: grab;
}