Multiple Splide Sliders on the Same Page

index.html

<!-- First slider codes -->
<section class="splide" id="first-slider" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>

<!-- Second slider codes -->
<section class="splide" id="second-slider" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>

multiple-splide-sliders-on-the-same-page.markdown

Multiple Splide Sliders on the Same Page

Splide is a lightweight, flexible and accessible slider or carousel written in TypeScript with no dependencies and no Lighthouse errors. When using it, maybe you encounter a situation where you need more than one slider or carousel on the same page and without any conflict between them. For more information, take a look at this blog post.

A Pen by Alvand WordPress Themes on CodePen.

License.

script.js

new Splide("#first-slider").mount();
new Splide("#second-slider").mount();

scripts

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/js/splide.min.js"></script>

style.css

section {
  margin: 2rem;
}

.splide__slide {
  background-color: tomato;
  padding: 6rem 2rem;
  text-align: center;
  font-size: 2rem;
}

#second-slider .splide__slide {
  background-color: BlueViolet;
}

styles

<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide.min.css" rel="stylesheet" />