Slider Style - Layered

Please follow below tutorial to create layered slider.

Each slide should be enclosed within a <li> tag and a <div> with class slider-item.
Below code will create three slides.

<li>
	<div class="slider-item">
		Slider one text
	</div>
</li> <!-- /end slide one -->

<li>
	<div class="slider-item">
		Slider two text
	</div>
</li> <!-- /end slide two -->

<li>
	<div class="slider-item">
		Slider three text
	</div>
</li> <!-- /end slide three -->

Add Text To Each Slide

For text section, add a <div> with class slider-text.

<li>
	<div class="slider-item">
		<div class="slider-text">
		-- Your Text For Slider One --
		</div><!-- /end slider-text one -->
	</div><!-- /end slider-item one -->
</li> <!-- /end slide one -->

<li>
	<div class="slider-item">
		<div class="slider-text">
		-- Your Text For Slider two --
		</div><!-- /end slider-text two -->
	</div><!-- /end slider-item two -->
</li> <!-- /end slide two -->

<li>
	<div class="slider-item">
		<div class="slider-text">
		-- Your Text For Slider Three --
		</div><!-- /end slider-text three -->
	</div><!-- /end slider-item three -->
</li> <!-- /end slide three -->

Add Image To Each Slide

For image section, add a <div> with class slider-image.

<li>
	<div class="slider-item">
		<div class="slider-text">
		-- Your Text For Slider One --
		</div><!-- /end slider-text one -->
		<div class="slider-image">
			-- your image code for slider one --
		</div><!-- /end slider-image one -->
	</div><!-- /end slider-item one -->
</li> <!-- /end slide one -->

<li>
	<div class="slider-item">
		<div class="slider-text">
		-- Your Text For Slider two --
		</div><!-- /end slider-text two -->
		<div class="slider-image">
		-- your image code for slider two --
		</div><!-- /end slider-image two -->
	</div><!-- /end slider-item two -->
</li> <!-- /end slide two -->

<li>
	<div class="slider-item">
		<div class="slider-text">
		-- Your Text For Slider Three --
		</div><!-- /end slider-text three -->
		<div class="slider-image">
		-- your image code for slider three --
		</div><!-- /end slider-image three -->
	</div><!-- /end slider-item three -->
</li> <!-- /end slide three -->

Use HTML img tag for image code.

<li>
	<div class="slider-item">
		<div class="slider-text">
		-- Your Text For Slider One --
		</div><!-- /end slider-text one -->
		<div class="slider-image">
			<img src="themes/eduxpro/images/demo/slider/slide1.svg" alt="slider" />
		</div><!-- /end slider-image one -->
	</div><!-- /end slider-item one -->
</li> <!-- /end slide one -->

<li>
	<div class="slider-item">
		<div class="slider-text">
		-- Your Text For Slider two --
		</div><!-- /end slider-text two -->
		<div class="slider-image">
			<img src="themes/eduxpro/images/demo/slider/slide2.svg" alt="slider" />
		</div><!-- /end slider-image two -->
	</div><!-- /end slider-item two -->
</li> <!-- /end slide two -->

<li>
	<div class="slider-item">
		<div class="slider-text">
		-- Your Text For Slider Three --
		</div><!-- /end slider-text three -->
		<div class="slider-image">
			<img src="themes/eduxpro/images/demo/slider/slide3.svg" alt="slider" />
		</div><!-- /end slider-image three -->
	</div><!-- /end slider-item three -->
</li> <!-- /end slide three -->

Add Title, Sub-title, Paragraph text to slides

You can use standard HTML tags for creating headings like: h1, h2, h3, h4, h5, h6 etc.

<li>
	<div class="slider-item">
		<div class="slider-text">
			<h3>Sub-title of slide one</h3>
			<h1>Title of slider one</h1>
			<p>Some dummy text of slider one</p>
		</div><!-- /end slider-text one -->
		<div class="slider-image">
			<img src="themes/eduxpro/images/demo/slider/slide1.svg" alt="slider" />
		</div><!-- /end slider-image one -->
	</div><!-- /end slider-item one -->
</li> <!-- /end slide one -->

<li>
	<div class="slider-item">
		<div class="slider-text">
			<h3>Sub-title of slide two</h3>
			<h1>Title of slider two</h1>
			<p>Some dummy text of slider two</p>
		</div><!-- /end slider-text two -->
		<div class="slider-image">
			<img src="themes/eduxpro/images/demo/slider/slide2.svg" alt="slider" />
		</div><!-- /end slider-image two -->
	</div><!-- /end slider-item two -->
</li> <!-- /end slide two -->

<li>
	<div class="slider-item">
		<div class="slider-text">
			<h3>Sub-title of slide three</h3>
			<h1>Title of slider three</h1>
			<p>Some dummy text of slider three</p>
		</div><!-- /end slider-text three -->
		<div class="slider-image">
			<img src="themes/eduxpro/images/demo/slider/slide3.svg" alt="slider" />
		</div><!-- /end slider-image three -->
	</div><!-- /end slider-item three -->
</li> <!-- /end slide three -->

Add Animation To Slider Text

You can add layered animations to the texts. They will appear in sequence (one after another).
layer1, layer2, layer3, layer4, layer5, layer6

Just add any layer class to the text.
Example: I want to assign layer1 to sub-title. So, its code will be like:

<h3 class="layer1">Sub-title of Slider One</h3>

Now I want to assign layer2 to title of slider. So, its code will be like:

<h3 class="layer1">Sub-title of Slider One</h3>
<h1 class="layer2">Title Of Slider One</h1>

Now I want to assign layer3 to description of slider. So, its code will be like:

<h3 class="layer1">Sub-title of Slider One</h3>
<h1 class="layer2">Title Of Slider One</h1>
<p class="layer3">Some dummy text as description of slider one</p>