Create a simple slider – without JavaScript

Continuing on from the post on creating snap scroll interactions without JS, it felt worth sharing this particular use case of this CSS technique to create a simple slider.

Sliders, while a topic for an accessibility discussion, are very popular across the web. There are many JavaScript libraries out there for creating sliders. Libraries such as Flickity, Swiper JS, and more. But are they necessary?

Creating a slider without JavaScript

<div class="slider">
  <img src="../link-to-image-1" width="300" height="300" alt="" class="slide">
  <img src="../link-to-image-2" width="300" height="300" alt="" class="slide">
  <img src="../link-to-image-3" width="300" height="300" alt="" class="slide">    
</div>

<style>
.slider {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}
.slide {
  scroll-snap-align: start;
}
</style>

This example on CodePen shows how it works.

Adding thumbnail navigation

It is possible to create thumbnail navigation by specifying an ID for each image and adding anchor links to them. When clicked, the slider smoothly scrolls to the given image.

<div class="slider-container">
  <div class="slider">
    <img src="../link-to-image-1" width="300" height="300" alt="" class="slide">
    <img src="../link-to-image-2" width="300" height="300" alt="" class="slide">
    <img src="../link-to-image-3" width="300" height="300" alt="" class="slide">    
  </div>
  <div class="thumbnails">
    <a href="#image-1">
      <img src="../link-to-image-1-thumb" width="55" height="55" alt="">
    </a>
    <a href="#image-2">
      <img src="../link-to-image-2-thumb" width="55" height="55" alt="">
    </a>
    <a href="#image-3">
      <img src="../link-to-image-3-thumb" width="55" height="55" alt="">
    </a>
  </div>
</div>

<style>
.slider-container {
  position: relative;
}
.slider {
  width: 300px;
  height: 300px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-x: auto;
  display: flex;
}
.slide {
  scroll-snap-align: start;
  margin-right: 1rem;
}
.thumbnails {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}
</style>

This example on CodePen shows how the slider works with thumbnail navigation.

Adding navigation arrows – with a touch a JavaScript

OK, this post says without JavaScript, but this next example adds in some potentially useful navigation buttons, with only 11 lines of unminified JavaScript to handle the button interactions.

<div class="slider-container">
  <div class="slider">
    <img src="../link-to-image-1" width="300" height="300" alt="" class="slide">
    <img src="../link-to-image-2" width="300" height="300" alt="" class="slide">
    <img src="../link-to-image-3" width="300" height="300" alt="" class="slide">    
  </div>
  <div class="thumbnails">
    <a href="#image-1">
      <img src="../link-to-image-1-thumb" width="55" height="55" alt="">
    </a>
    <a href="#image-2">
      <img src="../link-to-image-2-thumb" width="55" height="55" alt="">
    </a>
    <a href="#image-3">
      <img src="../link-to-image-3-thumb" width="55" height="55" alt="">
    </a>
  </div>
  <button class="btn prev" aria-label="Go to previous slide">&#10132;</button>
  <button class="btn next" aria-label="Go to next slide">&#10132;</button>
</div>

<style>
.slider-container {
  position: relative;
}
.slider {
  width: 300px;
  height: 300px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-x: auto;
  display: flex;
}
.slide {
  scroll-snap-align: start;
  margin-right: 1rem;
}
.thumbnails {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}
.btn {
  appearance: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  background-color: rgba(0,0,0,0.7);
  position: absolute;
  top: 150px;
  margin-top: -1rem;
  color: white;
  font-size: 1.2rem;
  line-height: 2rem;
  text-align: center;
}
.btn.next {
  right:-1rem;
}
.btn.prev {
  left:-1rem;
  transform: rotate(-180deg);
}
</style>

<script>
const slider = document.querySelector('.slider-container');
const slider_scroll = slider.querySelector('.slider');
const slider_item_size = slider_scroll.querySelector('img').clientWidth;

slider.querySelector('.btn.next').addEventListener('click', scrollToNextSlide);
slider.querySelector('.btn.prev').addEventListener('click', scrollToPrevSlide);

function scrollToNextSlide() {
  slider_scroll.scrollBy(slider_item_size, 0);
}

function scrollToPrevSlide() {
  slider_scroll.scrollBy(-slider_item_size, 0);
}
</script>

This final example on CodePen shows how the slider works with button navigation and a hint of JavaScript.

Summing up

Hopefully, these three quick examples will have shown you it is possible to create simple sliders with no, or very little, JavaScript. Leaving those JS libraries behind. Potentially using these techniques can save you having to load third-party libraries, saving kb on the page load.