slide-r

A minimalist web component for building horizontal sliding user interfaces.

• Touch-slideable
• Smooth scrollable
• Device-size adaptable
• Easily controllable

Include the slide-r.js script in your project, then in your HTML:

<slide-r>
  <article>Content</article>
  <article>Content</article>
  <article>Content</article>
  <article>Content</article>
</slide-r>

Each article will be positioned horizontally in a scrollable container, which will "snap" to center the nearest element. (articles are used here, but you can use any element.)

Scroll to the element at the given index, or to the element itself. For example:

const slider = document.querySelector('slide-r`)
slider.goTo(1) // Scroll to the second element
slider.goTo(slider.children[0]) // Scroll to the first element

Triggered when an element enters or leaves the scroll viewport. An Intersection Observer is used behind the scenes with default threshold of 0.8.

Metadata for each change event is included in event.details

Aside from setting up the touch-slideable, scroll snapping styles, slide-r does not provide any user interface controls. The following walks through creating "next/previous" controls.

Start with the HTML:

<slide-r>
  <article>Content</article>
  <article>Content</article>
  <article>Content</article>
  <article>Content</article>
</slide-r>
<button id="previous">Previous</button>
<button id="next">Next</button>

Then some styles to only show the buttons when the web component is defined:

#next,
#previous {
  display: none;
}

slide-r:defined ~ #next,
slide-r:defined ~ #previous {
  display: inline-block;
}

article {
  text-align: center;
  border: 1px solid;
}

And finally, a script to add the behavior:

const slider = document.querySelector('slide-r')
const previous = document.getElementById('previous')
const next = document.getElementById('next')

// Store the active element index
let activeIndex = 0

slider.addEventListener('change', ({ detail }) => {
  // Set the active index if it exists
  if (detail.activeItem) activeIndex = detail.activeItem.index

  // Disable previous/next buttons when at the start/end
  previous.disabled = detail.isStart
  next.disabled = detail.isEnd
})

// Handle previous/next navigation
previous.onclick = () => slider.goTo(activeIndex - 1)
next.onclick = () => slider.goTo(activeIndex + 1)

Web components, CSS Scroll Snap and Scroll-behavior have broad support. Safari iOS does not yet support smooth scrolling: goTo will scroll the slide-r, but will not animate it :(

Copyright © 2021+ Dom Christie and released under the MIT license.