Slider with Position Indicator Using Swipe.JS
Update (2/25/14): Once upon a time, more than a few site versions ago, I used a slider on my home page. The position indicator functionality had given me fits, so I built a handy dandy demo to help the next devs who wanted to use it and couldn’t quite figure out the position indicator. Here’s the post I shared about it:
Have you seen that beautiful slider on the home page of my portfolio? You know, the one with the dots beneath it that change color depending on what slide you navigate to?
I am in love with that slider.
It’s powered by Swipe.js, a plugin I chose specifically because it was touch-friendly. That was important to me because I wanted my site to be usable regardless of the device someone used to access it. After all, I have no control over what device or browser anyone uses to check out my site, and I believe it’s in my best interest to help visitors find the information they came here for.
When I first installed the script, I knew I wanted a position indicator. The dots below the slider communicate to the user which slide they’re looking at and how many slides there are. It may not seem all that important, but little things like this – that efficiently tell the user what to expect and what’s going on – go a long way to enhance the user experience.
Still, getting the thing to work was a bit of a pain. I tried working from the slider on the Swipe.js web site, which looked very different at the time, but didn’t have a lot of luck. I dug through the issues on Github, and I turned to a friend for a second pair of eyes. I kept trying slightly different configurations until the lightbulb finally went off: I’d been calling the active indicator all wrong.
I’ve had a couple of messages about the slider and how on earth I got the position indicator to work, so I put together a plain old HTML example of the Swipe.js slider with a working position indicator. The example includes two blocks in each slide, just to show how easy it is to use the slides for something more dynamic than an image carousel. The whole thing is responsive, too, and will resize with the window. I tried to explain most of the slider-specific code in comments, just for additional clarity.
I hope it helps!