splidejs

How to add a custom class to splide__slide using the classes option in Splide.js?


I am using Splide.js for creating a carousel, and I need to add a custom class to the splide__slide elements. I've seen that there's a classes option in Splide, but I'm not sure how to use it to add my custom class.

Here is the basic initialization code for my Splide carousel:

new Splide( '.splide', {
  type   : 'loop',
  perPage: 3,
  classes: {
    // How do I add my custom class here?
  },
} ).mount();

How can I modify this code to include a custom class, say my-custom-class, to each splide__slide element?

Thanks in advance for your help!

I tried with -

new Splide( '.splide', {
  type   : 'loop',
  perPage: 3,
  classes: {
   slide: "splide__slide custom__slide",
  },
} ).mount();

not working.


Solution

  • Check out this discussion on GitHub about this topic.

    As the maintainer stated in his response, and as it's documented in the official documentation, it's currently only possible to ...

    assign custom classes of dynamic contents, such as pagination

    ... and arrows, through the classes option.

    However, it's noted that custom classes can be added via the Elements component.

    Alternatively, and if it's possible for your setup/application, I would suggest adding the classes needed directly in the HTML, for example like this:

    <section class="splide custom-splide-class" aria-label="Splide Example">
      <div class="splide__track custom-splide-track-class">
        <ul class="splide__list custom-splide-list-class">
          <li class="splide__slide custom-splide-slide-class">Slide 01</li>
          <li class="splide__slide custom-splide-slide-class">Slide 02</li>
          <li class="splide__slide custom-splide-slide-class">Slide 03</li>
        </ul>
      </div>
    </section>