Swipe – the best image slider for mobile devices

Swipe is a lightweight and easy to use slider. It is perfect for mobile use, since it is very lightweight and it doesn’t take long to load.
On a mobile device, you can navigate through the slider with your fingers: just swipe trough the slides! it is also very easy to use, and you can adjust it to your own needs!

Screenshot of the image slider

Now we are going to show you how to set it up!

First you need to link the jQuery and the “swipe.js” file:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="swipe.js"></script>

The HTML setup is really simple:

<div id=‘mySwipe' class='swipe'>
<div class='swipe-wrap'>
<div></div>
<div></div>
<div></div>
</div>
</div>

above is the initially required structure. it is a very of elements, wrapped in two containers. You can place any content you want within the items.

Also add this basic CSS to your stylesheet:

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

After this, we start with the javascript. (don’t worry, its not difficult at all!)

Just ad the following:

<script>
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide: 0, //index position Swipe should start at
speed : 400, //speed of prev and next transitions in milliseconds.
auto: 3000, //begin with auto slideshow (time in milliseconds between slides)
continuous: true, //create an infinite feel with no endpoints
disableScroll: true, //stop any touches on this container from scrolling the page
stopPropagation: true, //stop event propagation
callback: function(index, element) {}, //runs at slide change.
transitionEnd: function(index, element) {} //runs at the end slide transition.
});
</script

You can change these parameters any way you like, so you can completely customize it however you want!

Swipe API
There are a few functions within Swipe, witch you can use for script control of your slider.

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)

Browser support
Swipe is now compatible with all browsers, including IE7+. Swipe works best on devices that support CSS transforms and touch, but can be used without these as well. A few helper methods determine touch and CSS transition support and choose the proper animation methods accordingly.

License
Copyright (c) 2013 Brad Birdsall Licensed under the The MIT License (MIT).

https://github.com/thebird/Swipe

Leave a Reply

Your email address will not be published. Required fields are marked *