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
Example 1
Example 2
Example 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.
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
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
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
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
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
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
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
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
Flipbook style page turner.... swipe capable, can include HTML text and images.
jQuery
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
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
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
Lovely work from Mirko Zoric
jQuery
Another beautiful design from Codrops. Suitable for an art site, responsive and detailed.
jQuery
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
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
A simple background slideshow with swipe capability that pulls images using the data attribute into a slideshow
jquery
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
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
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
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
A nifty grid using Masonry that has several options for viewing, including a lightbox.
jQuery
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
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
