Why isn't this Hello World Splide.js code working?

December 10, 2022

Maybe I am just too tired, but the most basic Splide example isn’t working and I’ve spent hours on it. Does nayone have any insight? No errors. Nothing seems wrong, it just won’t move off the first image. It will drag a bit to show the second picture, but it won’t navigate to it. Buttons don’t work either.

  document.addEventListener( 'DOMContentLoaded', function() {
                var splide = new Splide( '.splide').mount();
            } );

<html>
    <head>         
        <meta charset="UTF-8">
        <title>Splide test</title>
        <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">        
    </head>
    <body>
        <section id="splide" class="splide" aria-label="Splide Basic HTML Example">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide_slide">         
                        <img alt="one" src="https://zaydite.com/images/uploads/42/181/one.jpg">                    
                    </li>
                    <li class="splide_slide">
                        <img alt="two" src="https://zaydite.com/images/uploads/42/181/two.jpg">                  
                    </li>
                    <li class="splide_slide">
                        <img alt="three" src="https://zaydite.com/images/uploads/42/181/three.jpg">                        
                    </li>
                    <li class="splide_slide">      
                        <img alt="four" src="https://zaydite.com/images/uploads/42/181/four.jpg">
                    </li>
                    <li class="splide_slide">                
                        <img alt="five" src="https://zaydite.com/images/uploads/42/181/five.jpg">
                    </li>
                </ul>
            </div>
        </section>
        <script>
          
        </script>
    </body>

>Solution :

I have litle bit edited your code and added style to show image 100% of the page as it is working for me. Try out the following version.

<html>
    <head>
        <meta charset="UTF-8">
        <title>Splide test</title>        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
        <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
        <style>
        .splide__slide img {
            width: 100%;
            height: auto;
        }
        </style>
    </head>
    <body>
        <section id="image-carousel" class="splide" aria-label="Beautiful Images">
            <div class="splide__track">
                  <ul class="splide__list">
                      <li class="splide__slide">
                        <img alt="two" src="https://zaydite.com/images/uploads/42/181/two.jpg">
                      </li>
                      <li class="splide__slide">
                        <img alt="three" src="https://zaydite.com/images/uploads/42/181/three.jpg">
                      </li>
                      <li class="splide__slide">
                        <img alt="five" src="https://zaydite.com/images/uploads/42/181/four.jpg">
                      </li>
                      <li class="splide__slide">
                        <img alt="four" src="https://zaydite.com/images/uploads/42/181/five.jpg">
                      </li>
                  </ul>
            </div>
          </section>        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var splide = new Splide('.splide').mount();
            } );
        </script> 
    </body>
</html>