Question

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

Answer 1

您至少需要提供一个选择器来初始化$ sudo apt-get install python3-pymysql

Siema

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

注意：当您访问网站时，浏览器控制台中会显示一个错误。另外，不要忘记将脚本放入const mySiema = new Siema({ selector: '.siema', });

代码段：

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

根据评论更新

您的页面上有一些错误和很多有关non unique id的警告

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

您的错误说：

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

您的代码是：

Uncaught SyntaxError: Unexpected token <

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

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

1 个答案: