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

tag.

Normally it is strictly necessary to create an id for each

• 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.