Siema carousel 无法工作我已将文件添加到我的 wp-includes

Question

我正在尝试从此处获取 this work on my WP page but it won't work. I have downloaded the stable release 并在 wp-includes/js/slider/siema.min.js 中添加 siema.min.js 文件，我首先尝试通过添加脚本选项卡 src 和路径来调用页面上的文件。但它没有用，比我通过插入页眉页脚插件添加的要多。但它仍然不起作用，而是在另一张图片下方显示。

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

你至少需要提供一个选择器来初始化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> 标签。它应该工作。

Siema carousel 无法工作我已将文件添加到我的 wp-includes

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

html

javascript

css

carousel

siema

Siema carousel 无法工作 我已将文件添加到我的 wp-includes

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

html

javascript

css

carousel

siema

Siema carousel 无法工作我已将文件添加到我的 wp-includes