Previous & Next Buttons

This guide will show you how to add previous and next buttons using the Embla Carousel API. We're going to make use of the following methods to achieve this:

Button placement

Assuming your carousel is draggable, it's important to note that the root node will respond to pointer events. The root node is the one that is passed to the EmblaCarousel initializer. In the following example, it has the class name embla:

<div class="embla">  <div class="embla__container">    <div class="embla__slide">Slide 1</div>    <div class="embla__slide">Slide 2</div>    <div class="embla__slide">Slide 3</div>  </div></div>

const emblaNode = document.querySelector('.embla') // Root nodeconst embla = EmblaCarousel(emblaNode) // Passed to the initializer here

Therefore, it's not a good idea to place the previous and next buttons inside the root element, because a click on any of the buttons may trigger unintended drag interactions on the carousel.

To solve this, we're going to modify the minimal HTML setup from the installation guide by creating a viewport wrapper around our container like so:

<div class="embla">  <div class="embla__viewport">    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></div>

Our new wrapper with the class name embla__viewport will act as our new root element, which will encapsulate the scroll container and respond to pointer events. Now, we're ready to place our buttons outside that wrapper:

<div class="embla">  <div class="embla__viewport">    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div>  <button class="embla__prev">Prev</button>  <button class="embla__next">Next</button></div>

With vanilla JavaScript

Adding event listeners to our buttons is easy. It just requires some basic JavaScript to get this done. First, we need to grab our wrappers and buttons:

import EmblaCarousel from 'embla-carousel'
// Grab wrapper nodesconst rootNode = document.querySelector('.embla')const viewportNode = rootNode.querySelector('.embla__viewport')
// Grab button nodesconst prevButtonNode = rootNode.querySelector('.embla__prev')const nextButtonNode = rootNode.querySelector('.embla__next')

Now that we have our nodes, let's initialize our carousel and make our previous and next buttons respond to clicks. We'll use scrollPrev and scrollNext for this:

// Initialize the carouselconst embla = EmblaCarousel(viewportNode)
// Add click listenersprevButtonNode.addEventListener('click', embla.scrollPrev, false)nextButtonNode.addEventListener('click', embla.scrollNext, false)

With React

Modifying the minimal component setup from the installation guide, we're going to use the emblaApi to create our scrollPrev and scrollNext functions:

import React, { useCallback } from 'react'import useEmblaCarousel from 'embla-carousel-react'
export const EmblaCarousel = () => {  const [emblaRef, emblaApi] = useEmblaCarousel()
  const scrollPrev = useCallback(() => {    if (emblaApi) emblaApi.scrollPrev()  }, [emblaApi])
  const scrollNext = useCallback(() => {    if (emblaApi) emblaApi.scrollNext()  }, [emblaApi])
  return (    <div className="embla">      <div className="embla__viewport" ref={emblaRef}>        <div className="embla__container">          <div className="embla__slide">Slide 1</div>          <div className="embla__slide">Slide 2</div>          <div className="embla__slide">Slide 3</div>        </div>      </div>      <button className="embla__prev" onClick={scrollPrev}>        Prev      </button>      <button className="embla__next" onClick={scrollNext}>        Next      </button>    </div>  )}