Back to post

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:

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:

Name Default Type Description
startSlide 0 Integer Index position Swipe should start at
speed 300 Integer Speed of prev and next transitions in milliseconds.
auto '' Integer Begin with auto slideshow (time in milliseconds between slides)
continuous true Boolean Create an infinite feel with no endpoints
disableScroll false Boolean Stop any touches on this container from scrolling the page
stopPropagation false Boolean Stop event propagation
callback '' Function() Runs at slide change.
transitionEnd '' Function() Runs at the end slide transition.

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)

Default Example

HTML structure

<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>

Script

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) {}
});

CSS

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