Siema carousel won't work I have added the file in my wp-includes

Question

I am trying to get this work on my WP page but it won't work. I have downloaded the stable release from here and added siema.min.js file in wp-includes/js/slider/siema.min.js and I first tried calling the file on the page by adding a script tab src and path. But it didn't work and than I added through Insert Header footer plugin. But it still doesn't work, rather is shows an image below the other.

HTML

const mySiema = new Siema();
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');

prev.addEventListener('click', () => mySiema.prev());
next.addEventListener('click', () => mySiema.next());

body {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

img {
  width: 100%;
}

.siema {
  margin: 1rem 0;
}

<div class="siema">
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
</div>

<button class="prev">Prev</button>
<button class="next">Next</button>

Webpage in quesiton.

Answer 1

You need to at least provide a selector to initialize Siema

const mySiema = new Siema({
  selector: '.siema',
});

Here you'll find other options available.

Note: when you visit your website, there is an error in the browser console saying this. Also, don't forget to put your scripts inside a $(document).ready(function(){});

Snippet:

$(document).ready(function() {
  const mySiema = new Siema({
    selector: '.siema'
  });
  const prev = document.querySelector('.prev');
  const next = document.querySelector('.next');

  prev.addEventListener('click', () => mySiema.prev());
  next.addEventListener('click', () => mySiema.next());
});

body {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

img {
  width: 100%;
}

.siema {
  margin: 1rem 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://my.nikah.io/wp-includes/js/slider/siema.min.js"></script>



<div class="siema">
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
</div>

<button class="prev">Prev</button>
<button class="next">Next</button>

Update from comments

Your page has a few errors and and a lot of warnings about non unique id

For now, it's hard to find the later errors, but the first one is causing your siema carousel not to work.

Your error says:

Uncaught SyntaxError: Unexpected token <

And your code is:

<script>
  $(document).ready(function () {
    const mySiema = new Siema({
      selector: '.siema'
    });
    const prev = document.querySelector('.prev');
    const next = document.querySelector('.next');
    </p> // remove this tag
    < p > // remove this tag
    prev.addEventListener('click', () => mySiema.prev());
    next.addEventListener('click', () => mySiema.next());
  });
</script>

That error means you have html tags in your script and a < is not expected at that position. Remove those <p> tags from the siema initialisation script. and it should work.