Simple Slider

Create CSS-only simple animated Slider from images with animated texts and optional navigation bullets (navigation itself is not supported). The slide amount is unlimited (that is, you can insert as many slides as needed). This slider operate with 4 animation effects:

  1. Slide Right-to-Left (rtl);
  2. Slide Left-to-Right (ltr);
  3. Slide Bottom-to-Top (btt);
  4. Slide Top-to-Bottom (ttb);

But only one selected animation effect applied to all slides.

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 .csslider-simple. If you want that animation playing would be stopped on mouse hover add .pause-on-hover class. If you want that navigation bullets will be show only on mouse hover add .navi-on-hover class.

Example

First Slide

This is the Text for the First Slide...

Second Slide

This is the Text for the Second Slide...

Third Slide

This is the Text for the Third Slide...

Fourth Slide

This is the Text for the Fourth Slide...

Fifth Slide

This is the Text for the Fifth Slide...

Sixth Slide

This is the Text for the Sixth Slide...

  •  
  •  
  •  
  •  
  •  
  •  

Show Source

This Slider support animated Captions. Captions block consists of Title and Text lines. You can use them for each slide. It has two animation effects - appearance from left or right. The effect is determined separately for each slide it requires for <DIV> element .slide-content to add an additional class .left or .right.

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

Note: Animations Left-to-Right and Top-to-Bottom are inverted so you need insert slides in reverse order.

This page has been viewed: 1713 time(s)