Image Slider with Next Previous Button in JavaScript

This tutorial shows you how to create an image slider with next and previous buttons using JavaScript. It leverages Alpine.js for easy, reactive component management.

Step 1: Include Necessary Assets

This step involves adding the required CSS framework and JavaScript library to your project. We’ll use Google Fonts for icons and Alpine.js for the slider’s interactivity.

Step 2: Create the HTML Structure

Here, we build the basic HTML for the image slider, including buttons for navigation and a container for the images. Alpine.js directives will control the slider’s behavior.

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div class='wrapper'>
  <div x-data='slider'>
    <div class='slider-container'>
      <button @click='updateSlide'>
        <span class="material-symbols-outlined">chevron_left</span>
      </button>
      <div class='slider'>
        <ul class='slider-track' x-ref='track'>
          <template x-for='url in urls'>
            <li :style='{"background-image": `url(${url})`}'></li>
          </template>
        </ul>
      </div>
      <button @click='updateSlide("next")'>
        <span class="material-symbols-outlined">chevron_right</span>
      </button>
    </div>
    <nav class='slider-dots'>
      <template x-for='i in urls.length'>
        <button
          @click='index = i-1; slideTo(i-1)'
          :class='index === i-1 && "active"'
        >
        </button>
      </template>
    </nav>
  </div>
</div>

Step 3: Add CSS Styling

The CSS styles the slider, making it visually appealing and responsive.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  height: 100vh;
  display: grid;
  place-items: center;
}

.slider-container {
  width: min(1000px,90vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;

  & button {
    background-color: transparent;
    border: none;
    outline: none;
    height: min-content;
    cursor: pointer;

    & span { font-size: 2.75rem; }
  }

  & .slider {
    width: inherit;
    font: 900 1.25rem helvetica,sans-serif;
    border: 4px solid #000;
    overflow: hidden;
    
    & .slider-track {
      display: flex;
      list-style-type: none;
      transition: transform 0.8s;

      & li {
        min-width: 100%;
        aspect-ratio: 16/7;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
  }
}

.slider-dots {
  list-style-type: none;
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 1.5rem;

  & button {
    width: 1.75vmin;
    height: 1.75vmin;
    background-color: transparent;
    outline: none;
    border: 3px solid #000;
    border-radius: 1.5vmin;
    cursor: pointer;
  }

  .active { background-color: black; }
}

Step 4: Implement JavaScript Functionality

The JavaScript code uses Alpine.js to manage the slider’s state (current image index) and handles the navigation between images.

function registerComponent() {
  Alpine.data('slider',function() {
    return {
      urls: [
        'https://picsum.photos/id/781/900/500',
        'https://picsum.photos/id/240/900/500',
        'https://picsum.photos/id/539/900/500',
        'https://picsum.photos/id/358/900/500',
        'https://picsum.photos/id/620/900/500',
      ],
      index: 0,
      slideTo(i) {
        this.$refs.track.style.transform = `translateX(-${i * 100}%)`;
      },
      updateSlide(dir) {
        dir === 'next' ? this.index++ : this.index--;
        if (this.index < 0) this.index = 0;
        if (this.index > this.urls.length-1) this.index = this.urls.length-1;
        this.slideTo(this.index);
      },
    }
  });
}

document.addEventListener('alpine:init',registerComponent,false);

In conclusion, you’ve learned how to build a functional and visually appealing image slider using HTML, CSS, and JavaScript, powered by Alpine.js for simplified development.