Snippets/Sliding Image, Text or Gallery

Description
Enables an end user to post a gallery of images that layouts an infinite loop of moving slides of images, or text. 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 loops back to the beginning after it finishes.

This CSS right to left scroll can work with any normal Mediawiki Gallery and/or Text. Additionally it will expand the image upon hovering over it (that can be removed by removing the hover part in the css). I added a second section if you wish to pause the Slide upon Hover (for text presentations).

Visual Example
Sliding Image Gallery:

Usage
Sliding Gallery must be between the following division tags:. Due to issues of how the preview functions it is recommended that you wrap the whole sliding gallery inside some other divisors (it's very confusing to see images, etc., sliding behind the edit field when one is in the preview mode). See inline notes for more changes & notes below.

Technically the gallery, text, etc. is not sliding, the divisor is, which means any normal wiki syntax can be used inside the divisor and be seen to be sliding. For example if you're using the Widgets or the WidgetFramework Extensions you could, in theory, have a row of YouTube Videos sliding (not sure of the value of that, but it can be done)

With Text you could set up a series of tables and effectively have a slideshow presentation (the css can be re-written with pause points to make this more effective. or it can stopped upon hover --added the code below for this)

Example without the extra divisors to seal it off:(NOT RECOMMENDED)

Changing Size of Images
Syntax for changing the image size is normal Mediawiki syntax. However adjust divisors so overflow is not hidden.

Changing the size of the wrapper
The width of the wrapper should be more then the total width of all the images if you want to make sure all the photos are seen in the slide. You will need to play with it.

Changing the direction of the slide
The slide can function with three direction modes:normal (right to left), reverse (left to right) and alternate (starts one way switches at the end of every cycle). See code to change directions below.

Changing the speed of the sliding
Animation speed is set at 60s but you change it.Play with to find the optimal speed for you.

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 .wrapper img:hover section.

Stopping Slide on Hover
See second css section.

Recommendation when playing with this
It is very handle to be able to make changes and see the effectiveness of those changes immediately therefore I recommend the Extension:CSS during, at least, testing.

Code
Sliding Image, Text or Gallery.css:

For Stopping Upon Hover for text Presentations

To change the direction of slide: (add to wrapper section):

default:right to left:

Left to right:

Alternate

Alternate-reverse