Get started with swipe CDN

MIT licensed

Swipe is a lightweight library for creating touch-swipe gestures on desktop and mobile browsers.

Tags:
  • swipe
  • touch
  • mobile
  • slider

Stable version

Copied!

How to start using swipe CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/swipe.min.js"></script>
</head>
<body>
  <div class="swipe-container">
    <div class="swipe-wrapper">
      <div class="swipe-slide">Slide 1</div>
      <div class="swipe-slide">Slide 2</div>
      <div class="swipe-slide">Slide 3</div>
    </div>
    <button class="swipe-button-prev">Previous</button>
    <button class="swipe-button-next">Next</button>
  </div>
  <script>
    new Swipe(document.querySelector('.swipe-container'), {
      // Optional settings
      continuous: true,
      disableMouse: false,
      preventInteractionOnTransition: false,
      resistance: 0.2,
      resistanceRatio: 0.2,
      reloadOnVisibilityChange: true,
      followFinger: false,
      threshold: 50,
      transitionEndCallback: function() {
        // Callback when transition ends
      },
      transitionStartCallback: function() {
        // Callback when transition starts
      },
      callbacks: {
        slide: function(index, element) {
          // Called every time a slide is changed
          console.log('Current slide index:', index);
        }
      }
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions