Snippets/Sliding Image Gallery

Description
Enables an end user to post a gallery of images that layouts an infinite loop of moving slides of images. Will not show correctly on lower versions of ie (ie 9 & down, I think). Additionally it expands the image upon hover.Tested in the Foreground skin, but should work in all Mediawiki skins. It repeat with the beginning image once it goes to the end of the width of the banner (which could be before or after all the images have been seen)

The Size of the Images will be controlled by CSS and any sizes set will effect nothing.

Technical Note
The first image must be referenced as the first, which requires use of the html img tag. The additionally images in the series can added with the normal Mediawiki image syntax. See usage example. To allow the html img tag follow the steps here:Manual:$wgAllowImageTag.

Visual Example
Sliding Image Gallery:

Usage
Sliding Gallery must be between the following division tags:  & the   with the "photobanner" inside the "slidingphotocontainer" divisor tags.

Example: 

Changing Size of Images
Go to the section labeled .photobanner img to change width and height of the images.

Changing the size of the banner
The width of the .photobanner is the total width of the banner of rotating images. If the images are repeating before getting to the end the images set the width higher and if you're seeing a lot of blank space set it lower. You'll need to play with to get it right for you.

You can set up lots of sizes by harding code into the css different names for different sizes. You could create .photobannerone in the css and a .photobannertwo in the css.

Changing the size & background color of the container
The width of the container can be changed by changing the width. Or ideally someone, maybe you, could re-write this snippet to express different size containers based on the size of the device viewing the the sliding gallery.

To change the background color of the container just change the color expressed after background: in the #slidingphotocontainer section.

Changing the speed of the sliding images
Change the keyframe animations from 30s to what you desire.

Changing the hover size
Image expands when someone hovers over it. You can change the size of the expanded image by changing the scale in the .photobanner img:hover section.

Code
Sliding Image.css:

Note
This is NOT an extension in the technical sense of the term. But since it actually creates a new Gallery Format I've included it in the Image gallery extensions.