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:
- Slide Right-to-Left (rtl);
- Slide Left-to-Right (ltr);
- Slide Bottom-to-Top (btt);
- 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
Source Code:
<div class="csslider-simple items-6 pause-hover" id="slider-1">
<div class="slides btt"><!-- First slide -->
<div class="slider">
<div class="content">
<div class="slide-content right">
<h1>Slide #1 Title</h1>
<h2>Slide #1 Text...</h2>
</div>
</div>
<div class="images"><img src="image-1.jpg" /></div>
</div>
<!-- Second slide -->
<div class="slider">
<div class="content">
<div class="slide-content left">
<h1>Slide #2 Title</h1>
<h2>Slide #2 Text...</h2>
</div>
</div>
<div class="images"><img src="image-2.jpg" /></div>
</div>
<!-- Third slide -->
<div class="slider">
<div class="content">
<div class="slide-content right">
<h1>Slide #3 Title</h1>
<h2>Slide #3 Text...</h2>
</div>
</div>
<div class="images"><img src="image-3.jpg" /></div>
</div>
<!-- Fourth slide -->
<div class="slider">
<div class="content">
<div class="slide-content left">
<h1>Slide #4 Title</h1>
<h2>Slide #4 Text...</h2>
</div>
</div>
<div class="images"><img src="image-4.jpg" /></div>
</div>
<!-- Fifth slide -->
<div class="slider">
<div class="content">
<div class="slide-content left">
<h1>Slide #5 Title</h1>
<h2>Slide #5 Text...</h2>
</div>
</div>
<div class="images"><img src="image-5.jpg" /></div>
</div>
<!-- Six slide -->
<div class="slider">
<div class="content">
<div class="slide-content left">
<h1>Slide #6 Title</h1>
<h2>Slide #6 Text...</h2>
</div>
</div>
<div class="images"><img src="image-6.jpg" /></div>
</div>
</div>
<div class="switch centered">
<ul>
<li>
<div class="on"> </div>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</div>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.