Kwicks Image Gallery

• Live Demo
• Download

JavaScript
In order to make the script work, the index-#.html file with a gallery should contain these lines of HTML code:

The script.js file contains these lines of code that initialize the script functionality with basic values:

Here the script attributes define the following values:
•  max: 574 – maximum width of the slide when it’s opened;
•  spacing: 0 – spacing between the slides;
•  sticky: true – the default slide (see next) will be shown as opened by default;
•  defaultKwick: 2 – slide #3 will become active by default (here numbering starts from ‘0’);
•  event: ‘click’ – the gallery will open a new slide when you click it.

HTML
The slider is represented by the bulleted list using .kwicks and .horizontal classes for the <ul> tag.

Normally it is strictly necessary to create an id for each <li> tag, but it could be handy when you want to define different appearance (e.g. color, background, etc.) for each slide.

CSS
Kwicks slideshow has fully commented stylesheet, which is represented below:

You can find script related stylesheet in the main style.css file.