Snippets/Photo Slider

Description
The Following is an Image Slider that is currently on WikiVoyage, and they got it from: Sorgalla. It was published under the MIT License.

Visual Example


The above example is from WikiVoyage on 11/11/2014.

Code
jCarousel.js:

carousel.css:

Template used to create banner overlay writing
 | |  | 

|

See [Wikivoyage Template]

Usage Example of Banner from wikivoyage
Parameters:

direction - determines which side of the banner the text should be aligned. Valid values are "left" or "right".

width - (optional) allows the CSS width property to be overridden if, for example, the banner has a long title. Sample values should be of the form "45%".

title - Page title for the banner.

section - Sub-section for the banner, usually "Destination of the Month", "Off the Beaten Path" or "Featured Travel Topic".

section-link - Link subject for the sub-section, usually "Previous Destinations of the month", "Previously Off the beaten path" or "Previous Featured travel topics".

image - The banner image, without the File: prefix. Example: "MohenjoDaroBanner1.jpg".

quote - 1-2 sentences of text to appear below the banner sub-section.

Alternative Approach: Semantic Forms
Slider works great with an arraymap from the Semantic Forms Extension