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.

start coding

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.

Slideshow FadeIn Effect

Class identifier
slideshow-fadeIn

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
    slideshow plugin
  • Beatiful Scene Two
    slideshow plugin
  • Captivating Scenery
    slideshow plugin
  • Fanstastic World
    slideshow plugin
  • Refined Scenery
    slideshow plugin

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.

Code Sample

 
      <div class="slideshow-fadeIn">
       <section>
	    <ul>
            <li>
            <figure id="figure1">
	            <figcaption>Wonderful scenery one</figcaption>
	            <img src="../theme/placeholders/newentry/slide1.png" alt="slideshow plugin" title="slideshow plugin" />
            </figure>
            </li>
            <li>
            <figure id="figure2">
	            <figcaption>Beatiful Scene Two</figcaption>
	            <img src="../theme/placeholders/newentry/slide2.png" alt="slideshow plugin" title="slideshow plugin" />
            </figure>
            </li>
            <li>
            <figure id="figure3">
	            <figcaption>Captivating Scenery</figcaption>
	            <img src="../theme/placeholders/newentry/slide3.png" alt="slideshow plugin" title="slideshow plugin" />
            </figure>
            </li>
            <li>
            <figure id="figure4">
	            <figcaption>Fanstastic World</figcaption>
	            <img src="../theme/placeholders/newentry/slide4.png" alt="slideshow plugin" title="slideshow plugin" />
            </figure>
            </li>
            <li>
            <figure id="figure5">
	            <figcaption>Refined Scenery</figcaption>
	            <img src="../theme/placeholders/newentry/slide5.png" alt="slideshow plugin" title="slideshow plugin" />
            </figure>
            </li>
	    </ul>  
     </section>
    </div>

Slideshows with indicators

Class identifier
slideshow-buttonFade

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
    slideshow plugin
  • Slide two
    slideshow plugin
  • Slide three
    slideshow plugin
  • Slide four
    slideshow plugin
  • Slide five
    slideshow plugin

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.

 
        <!--slide panel previews -->
        <a id="slide1" data-slideshow="slide1"></a>
        <a id="slide2" data-slideshow="slide2"></a>
        <a id="slide3" data-slideshow="slide3"></a>
        <a id="slide4" data-slideshow="slide4"></a>
        <a id="slide5" data-slideshow="slide5"></a>

The corresponding navigation box that target every slide ID on click.

 
        <!-- Navigation -->
	    <span class="nav">
		    <a href="#slide1"></a>
		    <a href="#slide2"></a>
		    <a href="#slide3"></a>
		    <a href="#slide4"></a>
		    <a href="#slide5"></a>
	    </span>

Next, you stage the slide contents such as images and captions, every slide must be assigned a unique ID as shown.

 
    <ul>
        <li>
	        <figure id="figure1">
		        <figcaption>Slide one</figcaption>
		        <img src="../theme/placeholders/newentry/slide1.png" 
		        alt="slideshow plugin" title="slideshow plugin" />
	        </figure>
        </li>
        <li>
	        <figure id="figure2">
		        <figcaption>Slide two</figcaption>
		        <img src="../theme/placeholders/newentry/slide2.png" 
		        alt="slideshow plugin" title="slideshow plugin" />
	        </figure>
        </li>
        <li>
	        <figure id="figure3">
		        <figcaption>Slide three</figcaption>
		        <img src="../theme/placeholders/newentry/slide3.png" 
		        alt="slideshow plugin" title="slideshow plugin" />
	        </figure>
        </li>
        <li>
	        <figure id="figure4">
		        <figcaption>Slide four</figcaption>
		        <img src="../theme/placeholders/newentry/slide4.png" 
		        alt="slideshow plugin" title="slideshow plugin" />
	        </figure>
        </li>
        <li>
	        <figure id="figure5">
		        <figcaption>Slide five</figcaption>
		        <img src="../theme/placeholders/newentry/slide5.png" 
		        alt="slideshow plugin" title="slideshow plugin" />
	        </figure>
        </li>
    </ul>

Code Sample

Put it all together in a container and assign a class name slideshow-buttonFade, this is the class name that display items with an option of indication buttons.

 
 <div class="slideshow-buttonFade">
    <!--slide panel previews -->
    <a id="slide1" data-slideshow="slide1"></a>
    <a id="slide2" data-slideshow="slide2"></a>
    <a id="slide3" data-slideshow="slide3"></a>
    <a id="slide4" data-slideshow="slide4"></a>
    <a id="slide5" data-slideshow="slide5"></a>
      <!-- Slides -->
       <section>
        <ul>
           <li>
            <figure id="figure1">
	            <figcaption>Slide one</figcaption>
	            <img src="../theme/placeholders/newentry/slide1.png" 
	            alt="slideshow plugin" title="slideshow plugin" />
            </figure>
            </li>
            <li>
            <figure id="figure2">
	            <figcaption>Slide two</figcaption>
	            <img src="../theme/placeholders/newentry/slide2.png" 
	            alt="slideshow plugin" title="slideshow plugin" />
            </figure>
            </li>
            <li>
            <figure id="figure3">
	            <figcaption>Slide three</figcaption>
	            <img src="../theme/placeholders/newentry/slide3.png" 
	            alt="slideshow plugin" title="slideshow plugin" />
            </figure>
            </li>
            <li>
            <figure id="figure4">
	            <figcaption>Slide four</figcaption>
	            <img src="../theme/placeholders/newentry/slide4.png" 
	            alt="slideshow plugin" title="slideshow plugin" />
            </figure>
            </li>
            <li>
            <figure id="figure5">
	            <figcaption>Slide five</figcaption>
	            <img src="../theme/placeholders/newentry/slide5.png" 
	            alt="slideshow plugin" title="slideshow plugin" />
            </figure>
            </li>
	    </ul>
	    <!-- Navigation -->
	    <span class="nav">
		    <a href="#slide1"></a>
		    <a href="#slide2"></a>
		    <a href="#slide3"></a>
		    <a href="#slide4"></a>
		    <a href="#slide5"></a>
	    </span>
     </section>
    </div>

Code Editor - Customizes CSS plugin with ease

G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.

Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.

Newly design will be released soon!.

The view only show very small proportion of the original size, copy the code and view in a larger screen.