Fullscreen sliders, simpler than ever

Slidea can natively create hassle-free fullscreen sliders using the fluid layout. Fullscreen sliders will always keep their width and height to match the window’s width and height.

The markup for a fullscren slidea layout is the same as for any other layout.

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

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

To create the layout, simply set layout parameter to fluid in the slider settings, then set the fullscreen option in the size parameter of the layoutSettings.

$('.slidea').slidea({
  layout: "fluid",
  layoutSettings: {
    anchor: 'center', // center, top, bottom, left, right, top-left, top-right, bottom-left, bottom-right
    size: 'fullscreen'
  }
});