javascript - Siema轮播无法正常工作，我已在wp-includes中添加了文件

我试图在我的WP页面上使this工作，但是它不起作用。我从这里下载了稳定的release，并在siema.min.js中添加了wp-includes/js/slider/siema.min.js文件，我首先尝试通过添加脚本选项卡src和path在页面上调用该文件。但这没有用，然后我通过插入页眉页脚插件添加了它。但是它仍然不起作用，而是在另一个下方显示图像。

的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（在问题中）。

最佳答案

您至少需要提供一个选择器来初始化Siema

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

Here您将找到其他可用的选项。

注意：当您访问网站时，浏览器控制台中会显示一个错误。另外，不要忘记将脚本放入$(document).ready(function(){});

片段：

$(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>

来自评论的更新

您的页面有一些错误，并且有很多有关non unique id的警告

目前，很难找到以后的错误，但是第一个错误导致您的Siema轮播无法正常工作。

您的错误说：


  Uncaught SyntaxError: Unexpected token <


您的代码是：

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

该错误意味着您的脚本中包含html标记，并且在该位置不应出现<。从siema初始化脚本中删除那些<p>标记。它应该工作。