I have written code for thumbnail slider following an example in the following link splidejs/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="/@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="/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

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>
</div>

JAVASCRIPT CODE

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

I have written code for thumbnail slider following an example in the following link splidejs./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/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/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

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>
</div>

JAVASCRIPT CODE

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

• javascript
• css

Share Improve this question Follow edited Jan 17, 2024 at 23:13 Roko C. Buljan 207k4141 gold badges328328 silver badges340340 bronze badges asked Dec 16, 2020 at 4:35 Kelvin MgayaKelvin Mgaya 6911 gold badge22 silver badges99 bronze badges 8

• Why do you attach the same event twice to document? – Ryan Wilson Commented Dec 17, 2020 at 4:34
• I just copied from the above link, I made a mistake but after removing the error still remain – Kelvin Mgaya Commented Dec 17, 2020 at 4:45
• if it's undefined, I imagine there is an error in how you are importing the files. Add your headers to your post so people can check your imports – Ryan Wilson Commented Dec 17, 2020 at 4:52
• 1 Can you please add all of your headers which includes all js, because I can not see any slider JS file here – Swaraj Gandhi Commented Dec 17, 2020 at 5:07
• 1 I see a Splide css file but no JavaScript file import – Ryan Wilson Commented Dec 17, 2020 at 5:07

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 0

From what I see in your javascript code you are trying to mount Splide on "#secondary-slider" but I can't see this id in your HTML. Try fixing this with either adding an a corresponding id property to your div with with class "splide" or call Splide mount on ".splide"

Call JS after the HTML code: <script src="https://cdn.jsdelivr/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>

  new Splide('.splide').mount();
</script>

Should work https://github./Splidejs/splide/issues/9#issuement-573321831 This helped me.