Uncaught ReferenceError, Splide is not defined at HTMLDocument

I have written code for thumbnail slider following an example in the following link splidejs.com/getting-started for primary slider. Tried to look again and again but I don't see anything in the output even pictures are not shown. Header files already linked through CDN(CSS and js)

Below is the code:

HEADER FILES

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

 <script type="text/javascript" src="catalog.js"></script>
 <link rel="stylesheet" type="text/css" href="catalog.css">

JS HEADER FILE script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js">

HTML CODE

 <div class="splide">
  <div class="splide__track">
   <ul class="splide__list">
     <li class="splide__slide"><img src="pic2.jpg"></li>
     <li class="splide__slide"><img src="pic1.jfif"></li>
     <li class="splide__slide"><img src="">pic.png</li>
   </ul>
 </div>

JAVASCRIPT CODE

document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#secondary-slider', {
    fixedWidth : 100,
    height     : 60,
    gap        : 10,
    rewind     : true,
    cover      : true,
    pagination : false,
} ).mount();

} );