CSS Plugins

Lightweight, simple, smart and well structured modular system built
upon 16 scalable grids system that generates smooth and itch-free responsive layouts.
It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

Definition

Carousel is a vital module when considering displaying lots of items such as image
by repeating the target elements transitionally. Carousel slideshow supports multiple breakpoints and
is responsive. Featured carousel and slideshow is created using only CSS animation and transition properties to
display images and contents in a subtle way without Javascript.

Carousel Slides

Class identifiercarousel-autoSlide

Carousel with hover effect

This carousel display item with captions and pause on hover. The caption position varies and can be changed
to diffent location within the containing block using the layout class to place the caption to left,
right, top and bottom of the container.

Slideshow FadeIn Effect

This slideshow displays slides without button indicators.
In order to create this simple slideshow, follow the instructions below
with the code snippets to get started.

Wonderful scenery one

Beatiful Scene Two

Captivating Scenery

Fanstastic World

Refined Scenery

How to set it up

First create a container containing the slide of images to be display,
and the images must be identified with a unique ID as shown
below, in this demo, five image slides were used. It may be extended, but with a few snippet code to get it done.

With the container already created, assign the slideshow class identifier slideshow-fadeIn. The overhead caption may be removed if not required.

Slideshows with indicators

It displays slides with fade in effect transition when a button is clicked.
In order to create this simple slideshow, follow the simple instructions below
with the code snippets to get started.

Slide one

Slide two

Slide three

Slide four

Slide five

Four simple steps set up

First create a slide panel preview and assign a unique name to the ID selector of the hypertext link as shown.
This is necessary to create a corresponding slide view when click as a target from the navigation button.
Five slides were used in this demo, if you intend to increase the number of slides, simply add slide6, slide7...slideN
and this must match other corresponding ID in the navigation section of the slide.

Carousel Tiny

Class identifiercarousel-tiny

This carousel display images or item infinitely, the number of items per parent container should be
taken into consideration and the width and height of each featured item must measure equally to maintain consistency
across the container. The example below shows ten items displayed horizontally.