What is a HTML Layer?

Similar to image layers, slidea also has the concept of HTML layers. HTML Layers are components which can hold any HTML markup such as text, buttons and even images.

Welcome to slidea!

Slidea is a super fast, modular and intuitive multi-purpose content slider.

Slidea is awesome!

Unlimited animations, simple markup and great documentation.

How do I markup a HTML layer?

Make sure you’ve followed the previous Getting Started articles before you continue.

Instead of using the <img> tag, HTML layers will use a <div> tag and some content. You can put anything inside your HTML Layers.

<!-- Slidea -->
<div class="slidea">
  <!-- First Slide -->
  <div class="slidea-slide">

    <!-- Layer -->
    <div class="slidea-layer" data-slidea="slideLeftBigIn"
         data-slidea-top="30" data-slidea-left="150">
      <h2>Welcome to slidea!</h2>
      <p>Slidea is a super fast, modular and intuitive multi-purpose content slider.</p>
    </div>

    <!-- Background -->
    <!-- To change the background, modify the src=".." attribute -->
    <img class="slidea-background" src="assets/img/slide-1.jpg">
  </div>

  <!-- Second Slide -->
  <div class="slidea-slide">

    <!-- Layer -->
    <div class="slidea-layer text-right" data-slidea="slideRightBigIn"
         data-slidea-top="30" data-slidea-right="150">
      <h2>Slidea is awesome!</h2>
      <p>Unlimited animations, simple markup and great documentation.</p>
    </div>

    <!-- Background -->
    <!-- To change the background, modify the src=".." attribute -->
    <img class="slidea-background" src="assets/img/slide-2.jpg">
  </div>
</div>

How do I change the animation?

You can see we’re using the data-slidea attribute to set an initial animation preset. You can read more about animations in the animation presets and keyframed custom animations guides.

How can I position a HTML Layer?

As we’ve seen for image layers, the layer position can be set using data-attributes. You can use a combination of 2 of the following attributes:

• data-slidea-top

• data-slidea-bottom

• data-slidea-left
• data-slidea-right

<div class="slidea-layer"
     data-slidea-top="150" data-slidea-left="150">
  Hello world!
</div>

My layer is too big. What should I do?

By default, HTML Layers take up 100% of the slider width and have the same height as their content. You can override this behaviour by setting a custom layer width and height.

• data-slidea-width
• data-slidea-height

<div class="slidea-layer"
     data-slidea-width="480" data-slidea-height="320">
  Hello world!
</div>