Lorry slider with peek next slide

by Sreeraj Saseendran

HTML

<link rel="stylesheet" href="https://unpkg.com/lory.js/dist/lory.min.css">
<style>
  /* Tweak these two variables to control the design */
  .slider { --peek: 48px; --gutter: 12px; }

  .slider { position: relative; max-width: 800px; margin: 0 auto; }
  .slider .frame {
    overflow: hidden;
    padding-right: var(--peek); /* space for the next-slide peek */
  }
  .slider .slides {
    display: flex;
    will-change: transform;
  }

  /* The trick: make each slide narrower than the visible frame */
  .slider .slide {
    flex: 0 0 calc(100% - var(--peek) - var(--gutter));
    margin-right: var(--gutter);
    box-sizing: border-box;
  }

  /* Optional aesthetics */
  .slide > .card {
    border: 1px solid #ddd; border-radius: 12px; padding: 16px;
  }

  /* Controls */
  .slider .controls {
    display: flex; gap: 8px; justify-content: center; margin-top: 12px;
  }
  .slider button {
    border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer;
    background: #111; color: #fff;
  }

  /* Responsive: smaller peek on small screens */
  @media (max-width: 480px) {
    .slider { --peek: 28px; --gutter: 8px; }
  }
</style>

<div class="slider js_slider">
  <div class="frame">
    <ul class="slides">
      <li class="slide"><div class="card">Slide 1</div></li>
      <li class="slide"><div class="card">Slide 2</div></li>
      <li class="slide"><div class="card">Slide 3</div></li>
      <li class="slide"><div class="card">Slide 4</div></li>
    </ul>
  </div>

  <div class="controls">
    <button class="js_prev" aria-label="Previous">Prev</button>
    <button class="js_next" aria-label="Next">Next</button>
  </div>
</div>

<script src="https://unpkg.com/lory.js/dist/lory.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const el = document.querySelector('.js_slider');
    lory(el, {
      enableMouseEvents: true,
      rewindOnResize: true,
      // If you...