Full Screen with text

[timsun28]

Hi,

I really enjoy using splide for all different kinds of sliders.
I was wondering if there is a possibility to add text on top of full-screen images.

How would this be possible and if so could be interesting to add to the tutorials page as well.

Thank you,
Timo

[NaotoshiFujita]

The easiest way is using the cover option:

<div id="your-slider" class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <img src="image.jpg" alt="...">
        <p>Text text text</p> 
      </li>
    </ul>
  </div>
</div>

<script>
var splide = new Splide( '#your-slider', { 
  width: '100vw',
  height: '100vh',
  cover: true,
} );
</script>

Without the option, you can use absolute and z-index for texts just like a normal CSS way.

[timsun28]

Thank you for your example and quick reply. This is exactly what i'm looking for.