Uncaught ReferenceError: Splide is not defined

[trymeouteh]

I am having trouble getting Splide initiated. This is my code here and I followed the get started guide, and I get the following error in my console.

Uncaught ReferenceError: Splide is not defined

Not sure why this is. I installed Splide with npm.

<link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide-core.min.css">



<section id="mySplide" class="splide" 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>



<script src="node_modules/@splidejs/splide/dist/js/splide-renderer.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        new Splide('#mySplide').mount();
    });
</script>

[NaotoshiFujita]

Load splide.min.js instead of renderer.

[Rubel-hossain]

to avoid this issue we can use ID,

      <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide"><img src="img1.jpeg" alt=""></li>
                <li class="splide__slide"><img src="img2.jpeg" alt=""></li>
                <li class="splide__slide"><img src="img3.jpeg" alt=""></li>
          <li class="splide__slide"><img src="img4.jpeg" alt=""></li>
            </ul>
      </div>
    </section>
     <section id="thumbnail-carousel" class="splide">
       <div class="splide__track">
             <ul class="splide__list">
                 <li class="splide__slide"><img src="img1.jpeg" alt=""></li>
                 <li class="splide__slide"><img src="img2.jpeg" alt=""></li>
                 <li class="splide__slide"><img src="img3.jpeg" alt=""></li>
           <li class="splide__slide"><img src="img4.jpeg" alt=""></li>
             </ul>
       </div>
     </section> ```