Swipe.js - a lightweight mobile web slider
It's time for a mobile web slider that works.
Mobile size constraints mixed with new web functionality is allowing us to develop new models for how users interact with the web. This is a good thing. It forces us mobile web developers to rethink how we build the web. One of these key interactions is swiping through content, whether it be images, text, or other media. Image sliders and galleries populate the web as a way to display more in less space. This pattern is even more effective on mobile devices.
The big issue is that most of these were built for the full web, not mobile. I say most because there are some great sliders for mobile out there, specifically the Flux Slider which does a great job of bringing hardware accelerated transitions to sliders. This project does not have the same focus.
What is Swipe?
Swipe is a lightweight mobile slider with 1:1 touch movement. 1:1 touch movement is sliding content based on exact touch position. It's a different level of interacting with the content, more intuitive than swiping left to right and then watching the slider move to the proper position. This has been attempted many times but few seem to embody all the rules a slider like this must follow (in my opinion).
1:1 touch movement
1:1 movement, as described above, is about tracking the position of the touch and moving the content exactly how the touch interacts. This interaction is very common in native apps.
Resistant bounds
When Swipe is at the left-most position, sliding any more left will increase the resistance to slide, making it obvious that you have reached the end. This detection/resistance occurs at both left and right bounds.
Rotation/resize adjustment
When a user rotates their device (in turn resizing the browser window), the slider resets to make sure the sliding elements are the right size. This is only necessary for sliders without declared widths.
Variable width containers
Swipe allows you to set a width to the container, which designates the width of each slide element. This is important if you do not want a full width slider (the default).
Scroll prevention
Scroll prevention is one of the most overlooked pieces of mobile sliders. Swipe detects if you’re trying to scroll down the page or slide content left to right.
Library agnostic
Swipe doesn’t rely on any library. Trust me this is a good thing. All you have to do is pass in the container element, set some parameters, and BOOM goes the dynamite– your all set. You may choose to pass the element to Swipe with a library, but it’s not necessary.
Demo
Visit here on a touch-enabled mobile device:
Device Support
Swipe relies on a few important features in order to work properly, CSS transforms and touch. As you can get by without touch by using the prev and next buttons, CSS transforms are required. I have decided detection of these features should not be built into the core of Swipe, as every mobile experience should already have feature detecting on the page. I recommend using a custom build of Modernizr. More on this here.
Documentation
This project is hosted on Github. All documentation and further reading can be found there. If you have any questions or would like to get involved in making Swipe the best mobile slider, contact me on Twitter or Github.
One last note
This isn’t an experiment with technology, I use it in most of my mobile web projects. Swipe is meant to provide mobile web developers with a simple way to get sliding. This is just the start of Swipe, much more to come down the road.