7 Image Sliders with Responsive Fluid Layout Support

7 Image Sliders with Responsive Fluid Layout Support


7 Image Sliders with Responsive Fluid Layout Support

Introduction

Responsive Layout is the hottest trend at the moment. The blooming of mobile platforms have pushed this technique to a whole new level. The basic concept behind responsive layout is to adapt the website to different screen resolutions with CSS Media Query by hiding or resizing the web layout so it fits perfectly in different screen resolutions. One of the great and complex example of responsive layouts would be Smashing Magazine.

Due to the popularity of responsive layout, many developers have created Responsive Image Sliders as well to adapt the responsive and fluid layout. These sliders are pretty robust as they have many configurable settings, callback events and some of them with touch swipe support on mobile platform and of course, awesome transition too. In this post, we have 7 image sliders with responsive layout support.

In case you want more about image slider, you can visit two of our recent posts:

  • TN3Gallery TN3Gallery is one of the popular sliders because of its robustness such as skinning, transition, cross platform support, video support, powerful API etc.
  • RoyalSlider RoyalSlider is responsive image gallery and content slider with touch navigation for mobile devices. Its modular architecture allows you to include in build only features that you need to optimize speed and file size. Lazy-loading and memory management algoritm ensures that only a few slides are in DOM at once.
  • ResponslyResponslyResponsly.js contains a set of responsive widgets and responsive images slider is one of it. It's a fairly simple slider with keyboard navigation, interval, autostart and prev & nav features.
  • CameraCameraCamera slideshow is an open source project based on Diapo slideshow, but with additional features such as responsive, public methods, skins, easing and more transition.
  • SwipeJSSwipeJSSwipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, rotation/resize adjustment and completely library agnostic.
  • PhotoSwipePhotoSwipePhoto swipe has been released for quite a while now, it's a image gallery specifically targeting mobile devices with the look and feel of a native app.
  • UnoSliderUnoSliderUnoSlider is a fully responsive, touch enabled, mobile optimized jQuery slider plugin.
  • FlexSliderFlexSliderFlexSlider is a responsive slider that comes with a bunch of customisable settings. It supports callback api, touch swipe, custom navigation options and you can use any html elements in the slides.
  • BlueberryBlueberryBlueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

5 comments

Louis Gubitosi
Tue, 27th March 2012
Great collection but you spelled Responsive wrong. You should start submitting articles on TheWebBlend.com! Reply
Dan
Mon, 2nd April 2012
Hello!
thanks for this collection.
i like Camera and i'll surely use it in a web project.
Your blog is a reference for me
thanx Reply
Imran Haider
Mon, 9th April 2012
Thanks Louis Reply
Tami
Wed, 20th June 2012
where can i find fluid jquery content slider
Reply
ANJYR
Fri, 12th April 2013
thanks Dude......you save my time
good collection; Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement