Design

5 (Free) Beautiful Mobile-Friendly Image Sliders

By July 10, 2014 No Comments

There is nothing new about website image sliders but the way you interact with them has changed dramatically. A typical image slider usually includes a few basic controls, automatic slide transitions and the ability to cycle through slides via a pager. However, what happens when you try to interact with these sliders on a mobile phone? Or a tablet? There are a few problems that you could potentially run into.

No Gesture Control

Modern mobile OS takes advantage of gesture-based input in a big way. Almost every interaction with a mobile device consists of a touch or swipe gesture.

No Responsive Resizing

Even if the site layout and content are mobile-friendly, you might find that the image slider doesn’t reformat itself based on these updated screen resolutions. That means that while the content might look good, the image slider will still be quite large. The end result is that you have to scroll all around the page just to cycle through the images.

Slow Load Times

Speed is king on mobile devices. People’s attention spans are short. Many image sliders are comprised of large javascript/jQuery files which can be quite CPU intensive on your mobile device. The result is a sluggish web experience and longer load times.

So, what can you do to solve these problems? Simply, find a better image slider! Today I’ve brought to the table 5 mobile-friendly image sliders that are totally free and totally rock! Let’s take a look at each option.

Mobile-Friendly Image Sliders

1. SlideJS

SlideJS

  • Fully responsive
  • Natural swipe gestures
  • CSS3 transitions
  • Fallback support for older browsers
  • Multiple slideshows per page
  • FREE

2. Swiper

Swiper

  • Fully responsive
  • Natural swipe gestures
  • Hardware accelerated transitions
  • Many slider modes
  • Fallback support for older browsers
  • IE9+
  • FREE

3. bxSlider

bxSlider

  • Fully responsive
  • Mobile-friendly swipe gestures
  • Thumbnail pager support
  • CSS3 transitions
  • Responsive video options
  • IE7+
  • FREE

4. Slick

Slick

  • Multiple slider modes
  • CSS3 transitions
  • Fallback support for older browsers
  • FREE

5. Unslider

Unslider

  • Fully responsive
  • Super lightweight
  • Mobile gesture support (via additional plugin)
  • Computer keyboard control
  • FREE

 

Do you have another suggestion for a mobile-friendly image slider? Let me know in the comments.

Executive's Guide to Web Development

80 pages of topics and tips to navigate your way to a better website.