Archive for the ‘Gallery’ Category

There are many beautiful content sliders out there which can be easily integrated into web pages where most of them come with a default design and functionality.

If you want to create a completely custom one, Revolver.js,a boilerplate for customizable sliders is a good fit.

Revolver.js is a jQuery and MooTools plugin with an API covering the most common slider functions.

Revolver.js

Almost any markup can be used for sliders, their designs are under control with CSS and the API is flexible enough to manage it in any desired way.

There are various transitions types to choose from, functions exist for browsing items (first, last, next, etc.) and callbacks are offered for each event.

The resource is very easy-to-use, documented in detail and has a small footprint (~4.5kb minified).

Swipe JS is a lightweight (3.7kb minified) mobile slider with 1:1 touch movement (sliding content based on exact touch position).

It can display any HTML content and offers a native-like experience with features like:

  • resistant bounds (increased resistance to slide when there are no items to display next or before)
  • smart resizing on rotation as the slider resets to make sure the sliding elements are sized right
  • the size of each slide is set with the width of the container which is useful for passing different widths on responsive designs
  • detecting if you’re trying to scroll down the page or slide the content left to right

Swipe JS

Swipe is a standalone slider which doesn't rely on any JavaScript library and has few configuration options like:

  • the slide to be displayed on initial load
  • speed of transitions
  • auto slideshow to be on/off
  • and callback fired after successfully displaying a slide

Also, it has API methods for custom interactions including the display of prev-next items and getting the current position.

Fred Heusschen, a talented frontend web developer which has other resources shared at WRD, is sharing a must-bookmark one focused on image carousels.

CoolCarousels is a showcase of 20+ image sliders and carousels with each having a different look and functionality.

Cool Carousels

There are sliders with thumbnails, responsive examples, horizontal/vertical ones, lazy-loading supported sliders for displaying many images and much more.

They use jQuery as the JavaScript framework, their source codes can be seen with a click, all of them have demos and can be downloaded easily.

Flow Slider is a jQuery image slider plugin which reminds us the once-popular Flash sliders that respond to mouse interactions.

It works by converting an unordered list into a slider and can be browsed by hovering to the right or left side of it.

The plugin can be completely customized in means of design and functionality. There are options for transition type and speed, acceleration, starting position and much more.

Flow Slider

There are many jQuery slider plugins out there with each having pretty much number of features which usually end up in a big size.

Craftyslide is a jQuery image slider plugin for anyone looking to create a slider with only the standard and most-used features.

Craftyslide

It accepts unordered lists, can display captions, has a bullet navigation besides prev-next ones and uses fade animation for transitions.

Such a limited yet (usually) enough functionality only weights 2kb and works on all major browsers.