Extended Slider

Create CSS-only extended animated Slider from images with animated texts and navigation elements. The slide amount is limited (that is, you can insert up to 6 different slides). This slider operate with 6 slide appearance animation effects:

  1. Fade effect .fade;
  2. Rotate effect .rotate;
  3. Zoom effect .zoom;
  4. Slide to Right effect .slide-right;
  5. Jump effect .jump;
  6. Ken Burns effect .kenburns.

Different effects can be applied to different slides. For this add an additional class with animation name to the required <LI> element. In example: <li class="num1 img slide fade">.

Extended Slider for he owned slide can show animated Title and Description texts. This function also can operate with 6 texts appearance animation effects:

  1. On Top-Left corner .left-top;
  2. On Top-Right corner .right-top;
  3. On Top Center position .center-top;
  4. On Bottom Center position .center-bottom;
  5. On Bottom-Right corner .right-bottom;
  6. User defined position .custom-align.

Different text effects can be applied to different slides. For this add an additional class with text animation name to the required <div class="cs_description"><label> element. In example: <div class="cs_description"><label class="num2 right-top">.

Usage

To apply this feature you need to create specific HTML structure (see Source Code below). The class names to be used for primary <DIV> element: initial class .csslider1. If you want that navigation elements (arrows or/and bullets) do not show on slide hover you need to remove its HTML code manually.

Example

Show Source

All other settings can be managed by editing parameters in the file variables.less (see section "CSS Slider EXT Parameters").

This page has been viewed: 1831 time(s)