A content-size driven layout

The content layout creates a responsive slider which always takes the height of the content inside of its slides.

The content layout is a layout which most sliders do not have. It quickly adapts to any content size and allows you to use anything inside of your slides.

Welcome to slidea!

This slider uses the content layout.

Welcome to slidea!

This slider uses the content layout.

Where do I put the HTML content?

The content can be anything you’d like, starting from text and ending with complex grid systems. To markup the content, simply use the <div class="slidea-content"> markup we’ve already learned about in the Getting Started tutorials.

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

    <!-- Content -->
    <div class="slidea-content">
      <div class="slidea-content-container">
        <h2>Welcome to slidea!</h2>
        <p>This slider uses the content layout.</p>
      </div>
    </div>

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

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

    <div class="slidea-content">
      <div class="slidea-content-container">
        <h2>Welcome to slidea!</h2>
        <p>This slider uses the content layout.</p>
      </div>
    </div>

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

To use the content layout, simply set it as the layout parameter in the slider settings. The content layout also has a layoutSettings parameter which allows you to set the background image anchor.

$('.slidea').slidea({
  layout: "fluid",
  layoutSettings: {
    anchor: 'center', // center, top, bottom, left, right, top-left, top-right, bottom-left, bottom-right
    defaultHeight: 400 // Content height when .slidea-content doesn't exist
  }
});

Can I use it without background?

Of course you can. Just remove the background image and it’ll work like a charm. Remember, you can animate any element inside your slides using the slidea-object class together with the data-slidea animation parameter.