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:
- Fade effect
.fade; - Rotate effect
.rotate; - Zoom effect
.zoom; - Slide to Right effect
.slide-right; - Jump effect
.jump; - 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:
- On Top-Left corner
.left-top; - On Top-Right corner
.right-top; - On Top Center position
.center-top; - On Bottom Center position
.center-bottom; - On Bottom-Right corner
.right-bottom; - 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
Code:
<div class="csslider1 autoplay items-6">
<input class="cs_anchor slide" id="cs_slide1_0" name="cs_anchor1" type="radio" /> <input class="cs_anchor slide" id="cs_slide1_1" name="cs_anchor1" type="radio" /> <input class="cs_anchor slide" id="cs_slide1_2" name="cs_anchor1" type="radio" /> <input class="cs_anchor slide" id="cs_slide1_3" name="cs_anchor1" type="radio" /> <input class="cs_anchor slide" id="cs_slide1_4" name="cs_anchor1" type="radio" /> <input class="cs_anchor slide" id="cs_slide1_5" name="cs_anchor1" type="radio" /> <input checked="checked" class="cs_anchor" id="cs_play1" name="cs_anchor1" type="radio" /> <input class="cs_anchor pause" id="cs_pause1_0" name="cs_anchor1" type="radio" /> <input class="cs_anchor pause" id="cs_pause1_1" name="cs_anchor1" type="radio" /> <input class="cs_anchor pause" id="cs_pause1_2" name="cs_anchor1" type="radio" /> <input class="cs_anchor pause" id="cs_pause1_3" name="cs_anchor1" type="radio" /> <input class="cs_anchor pause" id="cs_pause1_4" name="cs_anchor1" type="radio" /> <input class="cs_anchor pause" id="cs_pause1_5" name="cs_anchor1" type="radio" />
<ul>
<li class="cs_skeleton"><img src="/image-1.jpg" /></li>
<li class="num0 img slide slide-right"><a href="http://pigios-svetaines.eu" target="_blank"><img alt="Title" src="uploads/image-1.jpg" title="Title" /> </a></li>
<li class="num1 img slide slide-right"><a href="http://pigios-svetaines.eu" target="_blank"><img alt="Title" src="uploads/image-2.jpg" title="Title" /> </a></li>
<li class="num2 img slide slide-right"><a href="http://pigios-svetaines.eu" target="_blank"><img alt="Title" src="uploads/image-3.jpg" title="Title" /> </a></li>
<li class="num3 img slide rotate"><a href="http://pigios-svetaines.eu" target="_blank"><img alt="Title" src="uploads/image-4.jpg" title="Title" /> </a></li>
<li class="num4 img slide rotate"><a href="http://pigios-svetaines.eu" target="_blank"><img alt="Title" src="uploads/image-5.jpg" title="Title" /> </a></li>
<li class="num5 img slide rotate"><img alt="Title" src="uploads/image-6.jpg" title="Title" /></li>
</ul>
<div class="cs_description"><label class="num0"><span class="cs_title"><span class="cs_wrapper">Img Title</span></span><br />
<span class="cs_descr"><span class="cs_wrapper">Img Title</span></span></label> <label class="num1 left-top"><span class="cs_title"><span class="cs_wrapper">Img Title</span></span><br />
<span class="cs_descr"><span class="cs_wrapper">Img Title</span></span></label> <label class="num2 right-top"><span class="cs_title"><span class="cs_wrapper">Img Title</span></span><br />
<span class="cs_descr"><span class="cs_wrapper">Labai gražus vaizdai</span></span></label> <label class="num3 center-bottom"><span class="cs_title"><span class="cs_wrapper">android</span></span><br />
<span class="cs_descr"><span class="cs_wrapper">Povandeninis pasaulys</span></span></label> <label class="num4 center-top"><span class="cs_title"><span class="cs_wrapper">Background Yellow</span></span><br />
<span class="cs_descr"><span class="cs_wrapper">Awesome Background Yellow</span></span></label> <label class="num5 right-bottom"><span class="cs_title"><span class="cs_wrapper"><a href="http://pigios-svetaines.eu" target="_blank">Earth from Universe</a></span></span><br />
<span class="cs_descr"><span class="cs_wrapper">Earth from dark shine Universe</span></span></label></div>
<div class="cs_play_pause"><label class="cs_play" for="cs_play1"><span><i></i></span></label> <label class="cs_pause num0" for="cs_pause1_0"><span><i></i></span></label> <label class="cs_pause num1" for="cs_pause1_1"><span><i></i></span></label> <label class="cs_pause num2" for="cs_pause1_2"><span><i></i></span></label> <label class="cs_pause num3" for="cs_pause1_3"><span><i></i></span></label> <label class="cs_pause num4" for="cs_pause1_4"><span><i></i></span></label> <label class="cs_pause num5" for="cs_pause1_5"><span><i></i></span></label></div>
<div class="cs_arrowprev"><label class="num0" for="cs_slide1_0"><span><i></i></span></label> <label class="num1" for="cs_slide1_1"><span><i></i></span></label> <label class="num2" for="cs_slide1_2"><span><i></i></span></label> <label class="num3" for="cs_slide1_3"><span><i></i></span></label> <label class="num4" for="cs_slide1_4"><span><i></i></span></label> <label class="num5" for="cs_slide1_5"><span><i></i></span></label></div>
<div class="cs_arrownext"><label class="num0" for="cs_slide1_0"><span><i></i></span></label> <label class="num1" for="cs_slide1_1"><span><i></i></span></label> <label class="num2" for="cs_slide1_2"><span><i></i></span></label> <label class="num3" for="cs_slide1_3"><span><i></i></span></label> <label class="num4" for="cs_slide1_4"><span><i></i></span></label> <label class="num5" for="cs_slide1_5"><span><i></i></span></label></div>
<div class="cs_bullets"><label class="num0" for="cs_slide1_0"><span class="cs_point"></span> <span class="cs_thumb"><img alt="Title" src="thumbs/image-1.jpg" title="Title" /></span></label> <label class="num1" for="cs_slide1_1"> <span class="cs_point"></span> <span class="cs_thumb"><img alt="Title" src="thumbs/image-2.jpg" title="Title" /></span></label> <label class="num2" for="cs_slide1_2"> <span class="cs_point"></span> <span class="cs_thumb"><img alt="Title" src="thumbs/image-3.jpg" title="Title" /></span></label> <label class="num3" for="cs_slide1_3"> <span class="cs_point"></span> <span class="cs_thumb"><img alt="Title" src="thumbs/image-4.jpg" title="Title" /></span></label> <label class="num4" for="cs_slide1_4"> <span class="cs_point"></span> <span class="cs_thumb"><img alt="Title" src="thumbs/image-5.jpg" title="Title" /></span></label> <label class="num5" for="cs_slide1_5"> <span class="cs_point"></span> <span class="cs_thumb"><img alt="Title" src="thumbs/image-6.jpg" title="Title" /></span></label></div>
</div>All other settings can be managed by editing parameters in the file variables.less (see section "CSS Slider EXT Parameters").