我希望有人可以提供一些关于从以下链接获取滑块以在 Wordpress 中运行的建议。我可以很好地使用 html、css 和相当数量的 php/mysql，但是我对 WordPress、javascript/jQuery 以及它们之间的交互方式有点不熟悉。我一直在寻找并没有看到这个确切的问题的解决方案，或者可能只是不太了解这个问题。我确实看到 jquery 已经在我们的 WP 标头中排队。
我不使用现有插件的原因是因为按钮和内容都是动态的，基于 php/mysql 数据库查询和 while 循环来生成两者（想想产品规格的列，3 或 4 列一次在包装器中可见，顶部的按钮将特定产品带到最左侧）。我确定我已经解决了这方面的问题，并且只需要让动画工作 - 目前一切都正确加载但按钮不起作用。我还尝试从演示中获取确切的代码，以确保我没有因为我的更改而搞砸——而且它只有在作为独立页面查看时才有效，没有所有的 WordPress 页眉、页脚等。
如果有人能指出需要做什么才能让链接滑块在 WordPress 模板中运行，我可以将其应用到实际项目中，我将永远感激不尽！也许有人做过类似的事情，也可以提出其他方法来解决它 - 无论哪种方式，我都在听！
提前致谢！
编辑：作为尝试解决这个问题的测试，我直接从上面链接的演示中获取了源代码 - 这本身就是一个 htm 页面，但我试图将它带入 WordPress 页面模板的尝试失败了。我忽略了 css，因为我认为这不是问题，但这里是演示正文中的全部代码。我假设我需要以不同的方式处理脚本部分 - 我需要创建一个单独的 js 文件并将其排入队列吗？标记不同？我对此一无所知，并感谢任何帮助。如果您要在 WordPress 模板中运行它，您会做些什么不同的事情？
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
<h1>AaBbCc</h1>
<p>For some reason, everybody likes <strong>Helvetica</strong>. In order to fit in, I have learned to like it as well.</p>
</div>
<div id="itemTwo" class="content">
<h1>AaBbCc</h1>
<p>Did you know that <strong>Georgia</strong> was designed by
Matthew Carter in 1993? Neither did I.</p>
</div>
<div id="itemThree" class="content">
<h1>AaBbCc</h1>
<p>The Impact font is used by people who want to make a difference
in the world.</p>
</div>
<div id="itemFour" class="content">
<h1>AaBbCc</h1>
<p>By using Comic Sans, the things you write automatically become
funnier. Try it out sometime!</p>
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px">1</li>
<li class="itemLinks" data-pos="-550px">2</li>
<li class="itemLinks" data-pos="-1100px">3</li>
<li class="itemLinks" data-pos="-1650px">4</li>
</ul>
</div>
<script src="http://www.kirupa.com/html5/examples/js/prefixfree.min.js"></script>
<script>
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.getElementById("wrapper");
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setPosition, false);
}
addClass(links[0], "active");
function setPosition(e) {
removeActiveLinks();
var clickedLink = e.target;
addClass(clickedLink, "active");
var position = clickedLink.getAttribute("data-pos");
wrapper.style.left = position;
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
removeClass(links[i], "active");
}
}
function addClass(element, classToAdd) {
var currentClassValue = element.className;
if (currentClassValue.indexOf(classToAdd) == -1) {
if ((currentClassValue == null) || (currentClassValue === "")) {
element.className = classToAdd;
} else {
element.className += " " + classToAdd;
}
}
}
function removeClass(element, classToRemove) {
var currentClassValue = element.className;
// removing a class value when there is more than one class value present
// and the class you want to remove is not the first one
if (currentClassValue.indexOf(" " + classToRemove) != -1) {
element.className = element.className.replace(" " + classToRemove, "");
return;
}
// removing the first class value when there is more than one class
// value present
if (currentClassValue.indexOf(classToRemove + " ") != -1) {
element.className = element.className.replace(classToRemove + " ", "");
return;
}
// removing the first class value when there is only one class value
// present
if (currentClassValue.indexOf(classToRemove) != -1) {
element.className = element.className.replace(classToRemove, "");
return;
}
}
</script>