Check if embla exists in ES6

Hello, i have a problem with checking if element exists and initializing the Embla carousel.

I want to do something like: If element exists on the page, then initialize it with Embla carousel, because when i do it without checking the element first, then on another subpage, i get an error saying “Error: No root element provided 😢”

My code looks like that:

import EmblaCarousel from 'embla-carousel';

const testimonials = document.querySelector('.embla__testimonials');

const checkTestimonials = () => {
  return EmblaCarousel(testimonials, {
    align: 'center',
    containerSelector: '*',
    slidesToScroll: 1,
    containScroll: false,
    draggable: true,
    dragFree: false,
    loop: false,
    speed: 10,
    startIndex: 0,
    selectedClass: 'is-selected',
    draggableClass: 'is-draggable',
    draggingClass: 'is-dragging',
  });
}

if (testimonials.length) {
  checkTestimonials();
}

The code above doesn’t work, it checks correctly for the element, but does not initialize the carousel, and i need to initialize it always after checking the element first 😕

Does anyone know how i can solve it? Thanks!

[jakubreron]

It works, you are amazing!! Thank you so much!

[davidjerleke]

Hi Jakub (@jakubreron),

Thank you for the additional code and information. I see one issue with the JavaScript code. The document.querySelector() returns two possible values:

1. If element is found, it returns an element node.
2. If not, it returns null.

It will never have the .length property because document.querySelector() will not look for a list of elements but rather a single element. So your if statement will always be falsy and never run the code inside it.

A solution for this is checking for null like so:

import EmblaCarousel from 'embla-carousel';

const testimonials = document.querySelector('.embla__testimonials');

const checkTestimonials = () => {
  return EmblaCarousel(testimonials, {
    align: 'center',
    containerSelector: '*',
    slidesToScroll: 1,
    containScroll: false,
    draggable: true,
    dragFree: false,
    loop: false,
    speed: 10,
    startIndex: 0,
    selectedClass: 'is-selected',
    draggableClass: 'is-draggable',
    draggingClass: 'is-dragging',
  });
}

if (testimonials !== null) { // change this line
  checkTestimonials();
}

You can read more about document.querySelector() on this page.

I hope this helps, and would very much appreciate if you could confirm if this is working or not.

Best, David