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.

The Siema script seems to run, but before the page content is loaded. Add the script like this: https://wordpress.stackexchange.com/a/51140/154474 — , May 04 '19 at 12:36
Can you please advice, how? Is this error related to this? https://github.com/pawelgrzybek/siema/issues/65 — thebeardedguy, May 05 '19 at 16:15

Towkir · Accepted Answer · 2019-05-05T17:36:43.067

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.

that pastebin code works perfectly fine. please don't say doesn't work, explain what is exactly happening. what do you see in the browser console ? — Towkir, May 05 '19 at 14:47
I am seeing a lot of error in the browser console. Don't know which is for this? This is my URL where I am trying https://my.nikah.io/slider/ and for error console this is the paste for it https://pastebin.com/rgjzNacf — thebeardedguy, May 05 '19 at 16:08

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

1 Answers1