Most web developers feel it’s redundant to create an interface from scratch when there are plenty of free code snippets online. Naturally this includes a broad range of interfaces from dropdown menus to accordion widgets. Another popular option is the responsive image carousels which have grown abundantly fashionable in recent years.
I’d like to delve into a few hardy solutions for creating quick and efficient responsive image carousels sliders. Most of these examples can be redesigned and styled to coalesce into one unifying layout. Plus the responsive design aides each of these plugins to fit into any type of layout regardless of size or fluidity.
bxSlider
The bxSlider plugin has been around for so long that it’s been ingrained into my collection of resources. The developer Steven Wanderski put the site up on a unique domain which is easier to remember than a GitHub repo URL. It’s certainly a fantastic option among the many free open source plugins available.
An interesting tidbit about bxSlider is that it comes with updatable themes. You can easily restyle the design or change colors/images by updating or creating a bit of CSS. Among the many files is a jquery.bxslider.css document which includes all the bare-bones properties. Copying and updating these codes will give you a clean slate to blend into any website.
Plus if you’re big into development then you’ll enjoy the bxSlider options list. All of the documentation can be found on bxSlider’s options page which acts like an internal API. It’s possible to build callback functions which iterate over other functions whenever an event happens, like an image slide or a user click.
Slick
One of my favorite new plugins released this year is slick. The rotator is built to be fully responsive and use CSS3 animations when possible. It’s also swipe-enabled to react properly on touchscreen devices. Plus you can choose to enable mouse-dragging for a swipe effect on desktops and laptops.
In fact there are so many features to this carousel I couldn’t possibly list them all. But I will say the dot navigation and the arrow links combined together make for a beautiful interface. I feel that slick really offers the best of everything – and it’s up to the developer to choose which features should be enabled or disabled.
The project is completely open source like everything else in this post. You’ll be able to see the full source on Github where you can download a copy. Even if you just want to toy around with the plugin it should be well worth the time.
I also suggest looking over the plugin’s custom settings. These are just parameters that you pass into the main JavaScript function to customize the look, interface, and interactive methods of the carousel. If you need an all-around reliable carousel solution my vote is for slick.
Unslider
For the fullscreen effect why not take Unslider for a test drive? It comes with a flexible height value that can be adjusted based on the image dimensions and website container. Everything fits into an unordered list so each slide might contain a fullscreen image with content or even an embedded video.
The plugin is marketed as a super-simple and tiny jQuery slider. It’s only 3kb and supports many typical functions like arrow and dot navigation, rotating slides, and keyboard control. If you want touch support you’ll need to include the 3rd party jQuery.event.swipe plugin which is also free to download.
I personally find Unslider to be best for larger dynamic slideshows that also include content. Since there are others that natively support swipe and touch effects this solution might not be as comparable for generic responsive design. Yet I still think it’s an excellent choice for a reliable and stable carousel.
Owl Carousel
Here’s another powerful contender with open source status and lots of development history to show for it. An interesting piece to Owl Carousel is the handful of loading options. You can pull from image thumbnails, JSON files, or even do lazy loading via Ajax.
I also think the Owl Carousel website is one of the better-designed sites. Not to say that any others are bad – far from it! But Owl Carousel has a lot of examples and demonstrations regarding how to implement the plugin’s myriad of features. There is a lot you can customize including mobile animations and touch support.
At the time of writing this article it looks like the developers have put out a beta release for the next version. Owl Carousel 2.0 has an updated website and some new options for improved performance. The plugin should be out of beta at some point in the near future so keep your eyes peeled. In the meantime the current version offers more than enough for any website design.
slidr.js
Recently I stumbled onto slidr.js and the whole concept is really quite resplendent. It actually does not rely on any dependencies like jQuery so everything is built using modern-day JavaScript. A little love and elbow grease has created one of the most intuitive sliding carousels for frontend web developers.
What really stands out to me about Slidr is the ability to rotate either vertically or horizontally. On the plugin’s homepage you can enable breadcrumb(dot) navigation on the demo to see how this works. Basically developers are allowed to create slides that move up-and-down or also move side-to-side as necessary.
There are no restrictions as far as HTML contents are concerned. You can build a slider using only inline elements if needed. The whole thing is responsive and touch-supportive meaning it works great on tablets and smartphones. Take a peek at the Slidr documentation if you want to learn a bit more.
Wallop Slider
If you’re looking for another independent plugin might I recommend Wallop? It’s a newer content slider which has no dependencies – no jQuery, MooTools, no requirements other than a web browser and friendly people surfing the Internet.
Wallop Slider moves between slides using CSS3 transition animations. It’s built to run with a minimal amount of JavaScript keeping a focus on progressive enhancement for all legacy browsers.
If you want to download a copy of this plugin check out the Wallop Slider GitHub page. It has some basics on getting started and setting up the plugin for use on any website. Although Wallop does have an API it relies solely on JavaScript for support. This isn’t necessarily bad, I just prefer working in jQuery myself.
For advanced customization this might not be the absolute best choice. However if you need a really simple responsive slider that runs without any dependencies Wallop can get the job done.
Dozens of plugins make been made for carousels and image sliders. While there are plenty of options, not all of them will prove useful for everyone. I certainly hope this collection offers some useful slider plugins for most situations. Given that jQuery is one of the most prominent JS libraries, it makes sense to work with plugins developed from the community. But if you have open source alternatives for any other library feel free to share links in the comments below.
This is so awesome! I usually use Flexslider, so I will have to give this a shot. Every design I make from here out will be responsive for sure.