Sliders

There are 6 sliders used in Quickr, 2 of which are fully responsive. Following is the description of each slider.

Quickr Slider Responsive

To make use of this slider you need to set full-size images and corresponding descriptions for them. Using title and description for each image is highly recommended to achieve best view. The markup is quite straightforward and is located on index.html file. Note that styles for this slider are located in css/style.css files and not on css/sliders.css as in the case of other sliders.

Flexi Slider Responsive

The use of this slider is as straightforward as possible. Browse to file index6.html to check the markup. To make use of additional options please refer to offical website documentation page.

Full width Slider Non-Responsive

The slider is located on index2.html. By adding a div element right after the images in the list you can add a description block which can include content of any type.

Circle Navigation Slider Non-Responsive

The slider is located on index3.html and provides a way to showcase your work with beautiful navigation effects. Be careful with the syntax and make sure you have included everything by browsing thorught the syntax code on index3.html as its use is not as straightforward as in the case of other sliders. Also note that you'll also need thumbnail version of the images included for the nice navigation effect.

Piecemaker - 3D Slider Non-Responsive

This is the only slider based on flash. This means all the data is passed through xml file which is located on the root folder (piecemaker.xml). To make sure of correct setup of the slider, please refer to Official Documentation which explains every aspect of the usage as well as optional modification parameters in detail.

KenBurns Slider Non-Responsive

The slider makes use of the famous Kenburns effect -which is a popular name for a type of panning and zooming effect used in video production from still imagery. Use this slider type with caution. The bigger is the size of the images, the better as the images move in random direction and small images transitions would not look as nice. Browse the markup to check and play around with the animation parameters.

Previous Section (Elements) Next Section (Audio/Video)
Top of Page