Mi Gallery

Version 1.0.3 - 18th February 2017
two callbacks and keyboard left/right controls added

For all the latest browsers and OS

Mi Gallery is my first venture into producing a jQuery plugin. It may not be the most correct way to do this but it works. I will update the script as I learn more about jQuery plugins.

Mi Gallery is a basic slideshow that has a several options which are shown in the ten demos below.

Most slideshows slide through all the images when using the thumbnails which I find a little annoying. This one always has the next and previous images just one image slide away, even when clicking the thumbnails and has a loop system so that, when at the last slide you do not have to swipe many times to get back to the first slide.

It also allows you to have many slideshows on the same page with each one having its own set of parameters.

The previous/next arrows and bullets are styled using just CSS so you can change these to anything you want, from images and pure CSS to 'Font Awesome' icons.

The html code for the arrows and bullets is produced by the plugin depending on the parameters setup for each slideshow. So the basic html code is the same for the first seven demos below.

Mi Gallery slideshow uses foreground images, which can behave like background images when the slideshow is made responsive. Resize the browsers a window to see how this works. Using this method allows you to change the images with html5 srcset.

Finally all the animation is done using CSS transition timing and transform:translateX() and as such uses hardware acceleration when available for smoother scrolling.

Demo #1

Demo #2

Demo #3

Demo #4

Demo #5

Demo #6

Demo #7

Demo #8

Demo #9

Demo #10

If you wish to test Mi Gallery then the jQuery script can be seen here mi_gallery.1.0.3.js, and the basic stylesheet here mi_gallery.1.0.3.css.
You will also need to link to the jQuery script as I have done, or download this and link to it locally.
Please respect my copyright.

Copyright ©2017 cssplay.co.uk - Stu Nicholls - All rights reserved