Very Simple Image Touch Slider With Limited Options – Swipe

Swipe is a very simple and easy to use image/content slider plugin that creates a sliding effect to any types of content easily. It has few options to modify or control the slider, so you can use this when you need a very basic slider. It supports slider movement on touch for touch-enabled devices only. Slider appearance can be modified easily with a bit help of CSS.

Features:

• Most accurate touch slider.
• Very simple and easy to use.
• Supports on all modern devices and browsers.
• Easy customizable with CSS.

How to use it:

1. Include the Javascript swipe.js at the bottom of the web page.

<script src="path/to/swipe.js"></script>

2. Add few styles to your stylesheet.

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

3. Add the basic HTML to the page.

<div id="slider" class="swipe">
  <div class="swipe-wrap">
    <div><img src="path/to/slide-1.jpg" alt=""></div>
    <div><img src="path/to/slide-2.jpg" alt=""></div>
    <div><img src="path/to/slide-3.jpg" alt=""></div>
  </div>
</div>

4. Initialize the plugin and we’re ready to go.

window.mySwipe = new Swipe(document.getElementById('slider'), {
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

Plugin’s default options:

Swipe API

prev() slide to prev

next() slide to next

getPos() returns current slide index position

getNumSlides() returns the total amount of slides

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)