Carousel

Carousel is one of the UI attractions that should not be over used. Kodhus provides a full featured Carousel with controls.

Using carousel is not recommended on mobile devices, therefore use it with causion

Example

Following is a full featured example using carousel with controls.

Usage

To create a carousel add a container element (e.g div) so that you can position your carousel where you want in the page.

Within your container add a div with the class .cdt-carousel and within that add section elements in order of the carousel elements you want.

Following is the code snippet with 4 sections:

<div class="carousel-container">
  <div class="cdt-carousel">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
  </div>
</div>
  

You can put whatever you want in your sections. You can add text, add picture or attach pictures as background images in your css like the example above.

Controls

You can add 2 types of controls to your carousel. Arrows and bullet controls. You need to add those as following after your last section.

  <div class="carousel-container">
  <div class="cdt-carousel">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <div class="controls">
      <span class="arrow left"></span>
      <span class="arrow right"></span>
      <ul>
        <li>
          <span></span>
        </li>
        <li>
          <span></span>
        </li>
        <li>
          <span></span>
        </li>
        <li>
          <span></span>
        </li>
      </ul>
    </div>
  </div>
</div>
  

As you can see, you need to add a div after your last section with the class .controls and within that you can add 2 spans which share the class .arrow and also .left and .right for you left and right arrows

.

Moreover you can add and unordered list with list items the number of sections you have. each of the list items should have and empty span inside.

At this stage you will have your carousel layout in your page. Now to enable the carousel you can have the following attributes that can be added to the div element with class .cdt-carousel:
In case of choosing auto slide feature, it's the delay between changing each slide
Attribute Value Description
data-carousel-type fade, overlay, slide and slide sense Defines different carousel types
data-auto-slide true / false Enables / disables auto sliding feature of the carousel
data-infinite true / false In the case of using slide or overlay type, when you use the arrow controls,
you will see the movement in one direction when going to the first or last item.
data-opacity-duration default: 1000 milliseconds (1 second) If the Reveal effect should happen for each children individually
data-slide-delay Default: 0