Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Gallery’ Category

Glide.js is a lightweight (4.5kb minified) jQuery plugin for creating sliders.

It has completely customizable OOCSS markup and uses CSS3 transitions but has fallback to JavaScript.

The slider is responsive, it’ll adapt well to all devices and comes with touch support.


You can navigate through the items with keyboard, swipe events or with the help of the bullet and arrow menus.

Glide.js also has a public API that supports all its events (play, pause, next, prev, etc.).

FerroSlider is a jQuery slider for creating full-page sliders (or content/image sliders) of almost any type.

The contents can be placed in a flexible way, horizontal + vertical, and the plugin will simplify browsing through them easily.


It uses CSS3 transitions for a good performance, works well with responsive layouts and works on mobile too.

The plugin has lots of customization options, has ready to use controls for navigation (arrow, bullet..)and can load content via Ajax.

Owl Carousel is a jQuery plugin that allows us to create responsive carousel sliders so quickly.

The plugin is touch-friendly and capable of featuring any HTML content with almost any markup.

It has options for setting the pagination/sliding speed, enabling/disabling auto-play, showing bullet navigation and more.

Owl Carousel

Also, it is possible to define the number of items to be shown on desktop, tablet + mobile separately and Owl Carousel will handle that automatically.

There is also an API for controlling the carousel however we prefer.

S Gallery is another jQuery image gallery plugin that displays images in a responsive grid.

It is inspired from the gallery in Sony’s product pages (which is made with Flash) and mimics that completely.

Once an item is clicked and focused, it is possible to browse others with prev-next buttons or via keyboard.

Returning back to the grid view is possible with a click and, also, a fullscreen option exists (uses HTML5 Fullscreen API).

S Gallery

Swiper is a beautiful content slider that is built for mobile and works pretty fast as it uses hardware accelerated transitions (if available).

The slider is lightweight, uses no JavaScript frameworks and has support for “touch events” whose interaction ratio can be customized.

It responds to changes in orientation, has support for vertical + horizontal sliding and comes with built-in pagination control (bullets).


Each swipe event brings the next/prev slide but it can be set in free mode as well where the content will be scrolled as much as you swiped.

Swiper can present multiple items at once (carousel), loop infinitely and feature any HTML content.

There is an API that allows controlling the pagination and provides callbacks on major events.

It also works on desktop browsers (mouse events are accepted) and can be extended with plugins.

Least.js is a jQuery-powered image gallery that can display images in a Pinterest-like layout.

The images are displayed from an unordered list where their order is randomized on each load.


Any clicked image doesn’t load the bigger version in a modal but by sliding other items down and the big version on the top (kinda similar to Google Image search).

The gallery makes use of HTML5-CSS3 features and works good on responsive layouts.

Gallery CSS is a content slider that is built with HTML-CSS and without any JavaScript.

It is an ultra lightweight solution (<1kb gzipped) and comes with an acceptable browser compatibility (IE9+).

There is support for auto-play, items can be browsed with the ready-to-use bullet-navigation or by simply linking to any slide.

The slider can display any HTML and a very useful resource for simple and fast-loading galleries.

Pure CSS Content Slider  - Gallery CSS

Flexisel is a jQuery carousel plugin that works well on screen sizes down-to-mobile.

It has settings for enabling autoplay, defining the animation speed and stopping on hover or not.

The standard layout of Flexisel adapts to different screen sizes but also, the plugin provides an option to customize the “number of visible items” for the screen sizes preferred which offers a great experience for users.

jQuery Responsive Carousel - Flexisel

Animated GIF files are the widely-used format for displaying “loader…” images.

Sonic is a tiny JavaScript class for creating such loader images with HTML5 canvas.

Sonic - HTML5 Canvas Loaders

It works by drawing a shape at tiny intervals along a pre-defined, custom path where sizes, colors or fps can all be customized.

There are ready-to-use examples provided and a web-based Sonic Creator exists for creating loaders and getting them as a HTML5 canvas code, animated GIF or a sprite image with the CSS3 code.

Bespoke.js is a lightweight (<1kb minified-gzipped) JavaScript framework for crafting totally custom presentations or content sliders.

It is a foundation that offers the base (keyboard + touch support and adding the necessary classes to slide items) and the rest (CSS transitions or any other JS ) can be developed however preferred.


There is a JavaScript API provided with all the major events like next, prev, a specific slide, etc. and a plugin system exists for extending it.

Also, the demo includes awesome themes that can be find many use cases to themselves.

  • Tags:
  • Filed under: Gallery, Goodies, MIT License
  • Uptime Robot