This one is for any developer who has gone on a hunt for a ad-rotator javascript library just so that a filmstrip of images properly behaves: snap-x for diagonal overflows and snap-y for vertical overflows.

There’s a host of classes controlling whether the div’s contents snap to the start (snap-start) or the center (snap-center) or the end of each div (snap-end)

Here’s the Scroll snap API adding just a bit of welcome interactivity to a film roll:

Where would you use it in a Rails project? Anywhere you are doing a filmstrip and you want to dress up the experience or, for long sections of text that need a polished professional feel.

`<div class="relative w-full flex gap-6 snap-x snap-mandatory overflow-x-auto pb-14">
  <div class="snap-center shrink-0">
    <div class="shrink-0 w-4 sm:w-48"></div>
  </div>
  <div class="snap-center shrink-0">
    <img class="shrink-0 w-80 h-40 rounded-lg shadow-xl bg-white" src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80">
  </div>
  <div class="snap-center shrink-0">
    <img class="shrink-0 w-80 h-40 rounded-lg shadow-xl bg-white" src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80">
  </div>
  <div class="snap-center shrink-0">
    <img class="shrink-0 w-80 h-40 rounded-lg shadow-xl bg-white" src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80">
  </div>
  <div class="snap-center shrink-0">
    <img class="shrink-0 w-80 h-40 rounded-lg shadow-xl bg-white" src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80">
  </div>
  <div class="snap-center shrink-0">
    <img class="shrink-0 w-80 h-40 rounded-lg shadow-xl bg-white" src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80">
  </div>
  <div class="snap-center shrink-0">
    <img class="shrink-0 w-80 h-40 rounded-lg shadow-xl bg-white" src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80">
  </div>
  <div class="snap-center shrink-0">
    <div class="shrink-0 w-4 sm:w-48"></div>
  </div>
</div>

https://tailwindcss.com/docs/scroll-margin