Responsive image display

Swiper with src-set responsive image selection

Swiper SrcSet

Highly modified and cut down by Piccante to add src set images. Using 'w' as an image attribute allows the browser to determine the best image including on retina devices. Seem to have solved issue of slide height by using 'vw'. The winner so far? If you prefer not to have all 'small' size placeholder images and have a true lazy load site then check out version two or this full-height and full-width version.

Test my site: 3seconds.

PageSpeed Insights: 74/100 and 77/100

j swiper javascript only

By iDangerous

bqworks Slider Pro

bqworks slider proExample 1 bqworks slider proExample 2 bqworks slider proExample 3

Five examples, all are responsive, touch (swipe) enabled, have alternate sources for retina (high PPI) screens, and feature lazy loading. Examples 2 and 4 use Fancybox (Lightbox). Examples 1 and 5 have media breakpoints. Example 2 features a carousel layout. Infinite scrolling available. Full window available on Example 2 (and 3?). Can handle portrait and landscape orientated images and Example 4 has auto-height.

Example 2 - Carousel with dot pagination and lightbox. Currently working on improving the performance of this with Example 2A.

Example 3 - Single large image with thumbnails in a lower

Example 4 - Auto-height multi-use slideshow including video and multiple layouts.

Example 5 - A responsive layout that shows the thumbnails and captions to the right on wide screens and positions them to the bottom of the main image on smaller screens. Quite slick.

Example 1 Lighthouse: 79/100

PageSpeed Insights: 82/100 and 91/100

jQuery - not yet fully tested on devices/browsers but has potential.

By bqworks

Lazysizes

lazysizes

A combination of the Flex Slider and Lazy Sizes in a slider. Has great potential but seems to be a little erratic in selecting the correct size image in Chrome browser, including the mobile.

Test my site: 8seconds.

PageSpeed Insights: 91/100 and 37/100

jQuery

By iDangerous

Elba swipe slider

Elba Swipe

Swipe capable, lazy loading with media queries. Is this the smoothest slider? Probably not, but these other features make it well worth considering for your project. At the moment there is an issue with the swipe function not working on Windows touch screen computers.

Test my site: 4seconds.

PageSpeed Insights: 61/100 and 74/100

javascript only

By Giancarlo Soverini, iliketomatoes

Elba modified

Elba Swipe

Messed around with by Piccante to limit height of the slider. At the moment there is an issue with the swipe function not working on Windows touch screen computers.

Test my site: 4seconds.

PageSpeed Insights: 66/100 and 79/100

javascript only

By Giancarlo Soverini, iliketomatoes

Fitness Swipe slider

Fitness Swipe

A heavily modified version of the responsive slider by w3cwidgets. Incorporating a sticky responsive menu this has been pretty well tested out on most modern desktop browsers, mobile iOS products and Android Chrome. Animations, swipe and pagination feature in this nicely featured ready-to-go site.

jquery

By w3widgets

Justiswipe

Justiswipe Flickr slider

Quite file-intensive but it ticks all the boxes, however it can be buggy. Supports albums (and multiple albums on one page), captions, swipe capable and uses the very tidy justified.js for thumbnail layout and the photoswipe.js libraries for function. Not a bad page download time either, only 1.2 seconds for intial load on Chrome!

jQuery

By Peter Fabian.

Simple Lightbox

Simple Lightbox swiper

A winner. Thumbnails appear in a masonry effect and it works with two galleries or more galleries too. Or, version 2 with horizontal masonry using simple ul and li - which is ok as long as you don't mind losing some image top and bottom..

jQuery

By Andre Knieriem.

Photoswipe with Masonry

Photoswipe Flickr slider

Masonry to make the thumbnails beautiful. Swipe-capable light-box style gallery with captions. A little finnicky so I've disabled the share and full-screen capability, but should be able to re-add this if necessary. For documentation check the Photoswipe documentation and Thrive Web site for the Masonry bits.

jQuery

By Dimitry Semenov.

Nice Gallery

Nice Gallery, a Flickr slider

No known problems with the nice gallery that is responsive and pulls files from Flickr with auto captioning and thumbnailing in a masonry style display.

jQuery

By Lukasz.

BookBlock

Bookblock flip viewer

Flipbook style page turner.... swipe capable, can include HTML text and images.

jQuery

By Tympanus

Aino Flickr-feed Galleria

Aino Flickr Galleria slider

Caution - won't load on mobile devices after modification? A super gallery / slider that pulls images from your flickr photoset (not just the author). Simply upload your photos to your flickr account, create a set and let us know the set number. Includes a info (caption) from filename. Organise the order that they appear in by modifying in Flickr Organiser. Fullscreen now as modified by Piccante recently. The only down side? No swipe capability, but the other benefits must outweight this?

jQuery

By Aino Galleria.

Trung Ho Masonry-style Flickr-feed Galleria

Trung Ho Flickr Feed slider

A nice gallery using masonry style display that pulls images from a Flickr account. Easy to set up and get the API. Downside at the moment - doesn't support albums (have to load from the Flickr 'author' account) and there is no caption support at the moment. The "lightbox" has been trimmed down and is now good - great because it is swipe supported in fact.

jQuery

By Trung Ho.

Plus Gallery

Responsive thumbnail image view

This is a great slideshow. The images are uploaded from your Google (Picasa) account once it is "Shared" to the public. Thumbnails are created automatically and best of all - the slideshow is responsive.

jQuery 1.7.2

By Pluse Gallery

Fluxus

Fluxus two part image slider

Lovely work from Mirko Zoric

jQuery

By Mirko Zoric

Diagonal Slideshow

Diagonal image slider

Another beautiful design from Codrops. Suitable for an art site, responsive and detailed.

jQuery

By Tympanus (Codrops)

2 block responsive product slider

2 block responsive image slider

An app-style website that gloriously shows off products in two blocks. Adopted from the great article and tutorial from CodyHouse, this deveopmental site also features the off-canvas menu first seen on the Codrops site. Slick, responsive and very very nice to look at.

jQuery

By Codyhouse and Codrops

Gilbitron Ideal Gallery

Responsive swipe friendly image slider

An HTML5/SEO friendly slider that is fully responsive to retain width and proportion of the images. Retina friendly with 2x resolution possible. Touch enabled and keyboard navigation finish it off. The slideshow pauses on hover and also shows the navigation arrows at the same time. Nice.

Vanilla js

By Gilbitron

Simple Fullscreen Background Image Slideshow

Simple Full Screen Background Slideshow

A simple background slideshow with swipe capability that pulls images using the data attribute into a slideshow

jquery

By Tutorialzine

Swiper

Swipe capable full width, responsive image slideshow

A nice full-width responsive slideshow with swipe capability and pagination.

Also check out this Piccante-tailored version with navigation arrows left and right

jquery

By iDangero.us

Fresco

Responsive image gallery

A beautiful, responsive lightbox. Youtube and Vimeo integration is possible. Commercial licences may be necessary.

Note that the close ('x') icon is very small on some devices

jQuery 1.11.1

By Fresco.js

Responsive Slides

Responsive slides image viewer

This versatile gallery has slide show, numerical pagination, caption or thumbnail options. Modified and shown in the Piccante Web Design.co.nz website as our special limited edition photography site for sale

jQuery 1.8

By @viljamis

Responsive Slides with media queries for screen width and retina detection

Responsive slides image viewer

Full page width, serving only the image size required by your device to save on bandwidth and reduce page load time. A sweet solution for a high-end website. Image costs per slide may be more than HKD$28 per image as each image must be edited into 8 suitable sizes. Remember that your minimum image size must also ideally be at least 2560 x 1800 px

This slideshow also uses the excellent picturefill.js plugin, thanks to Scott Jehl.

jQuery 1.8

By @viljamis

Wookmark Masonry demos

Wookmark

A nifty grid using Masonry that has several options for viewing, including a lightbox.

jQuery

By Wookmark

Responsive Google Grid

Responsive Google Grid viewer

A nifty grid using Masonry that enlarges into a slider. Responsive - another beauty from Codrops.

Note that the images are truncated in landscape orientation of some mobile devices, a better option might be the Masonry plugin

No jQuery

By Tympanus (Codrops)

Anoslide

Anoslide

A responsive carousel-style slider with non-infinite looping. There could be the possibility to integrate a modal popup or lightbox style image to view a larger picture, untested at this time.

Note that the buttons (controls) are rather difficult to use on smaller devices

jQuery 1.10 min

By Anowave

Join us on Facebook Join Piccante on Facebook | Follow us on Twitter Follow piccanteweb on Twitter | View our latest website