Slider Style - Layered

Edu X Pro theme comes with inbuilt full screen layered slider powered by JavaScript and CSS3. No additional module is required for this.

How to manage homepage slider

Homepage slider can be managed from theme settings page.

Navigate to:
Home Administration Appearance Appearance settings Edu X Pro

example.com/admin/appearance/settings/eduxpro

How To Select Layered Slider

You can select the layered slider style for homepage from theme settings page.

How to show default layered slider

Enable slider and select Layered slider style. Now leave layered slider code box empty.

How To Change Default Slider

Enter your own layered slider code to override the default slider. You can insert your layered slider code under Layered Slider tab as shown in below image.

Default Layered Slider Code

<li>
<div class="slider-item">
  <div class="slider-text">
    <div class="font-large layer1">Welcome To Edu X Pro</div>
    <h1 class="layer2">Master the <em>Skills</em> to Drive your <em>Career</em> and Personality</h1>
    <p class="layer3">Minimum theory and maximum practice with activities to boost your skill. Solve tasks and check the results right away. </p>
  </div><!-- /slider-text  -->
  <div class="slider-image">
    <img src="/themes/eduxpro/images/demo/slider/slide1.svg" alt="slider" />
  </div><!-- /slider-image -->        
</div><!-- /slider-item -->
</li>
<li>
<div class="slider-item">
  <div class="slider-text">
    <div class="font-large layer1">We Are Best Theme</div>
    <h1 class="layer2">World Class <em>Management</em> Course For A Brighter Future</h1>
    <p class="layer3">Learning is a life-long journey that in fact we never find the terminate stop. Stop searching, build an amazing future with us.</p>
  </div><!-- /slider-text  -->
  <div class="slider-image">
    <img src="/themes/eduxpro/images/demo/slider/slide2.svg" alt="slider" />
  </div><!-- /slider-image -->  
</div><!-- /slider-item -->
</li>
<li>
<div class="slider-item">
  <div class="slider-text">
    <div class="font-large layer1">Unlock Your Potential</div>
    <h1 class="layer2">Expand <em>Possibilities</em> Extensively to Build Amazing Career</h1>
    <p class="layer3">Discover the simple Steps to discover the hack of productivity.</p>
  </div><!-- /slider-text  -->
  <div class="slider-image">
    <img src="/themes/eduxpro/images/demo/slider/slide3.svg" alt="slider" />
  </div><!-- /slider-image -->  
</div><!-- /slider-item -->
</li>