Slideover

Hello world!

HTML

<div id="s1" class="slideover aspect-ratio aspect-ratio--16x10">
  <div class="slides aspect-ratio--object">
    <img src="/folder/fileName.jpg" alt="">
    <div class="flex justify-center items-center h-100 bg-yellow">
      <h1>Hello world!</h1>
    </div>
    <img src="/folder/fileName.jpg" alt="">
    <img src="/folder/fileName.jpg" alt="">
  </div>
  <div class="arrows">
    <span data-slide="prev" class="arrow">←</span>
    <span data-slide="next" class="arrow">→</span>
  </div>
</div>

JavaScript

<script src="/slideover.js"></script>
<script type="text/javascript">
  window.addEventListener('load', function () {
    new Slideover('#s1')
  })
</script>