本地主机中的 WordPress 滑块 url 问题

Question

我正在尝试根据以下代码在本地主机的 wordpress 中实现照片滑块：

https://github.com/devfreelex/sliderdevmean 和视频 https://www.youtube.com/watch?v=_nSPiKWWmhs

问题如下：

在索引页面中我有 html 代码：

<article class="slider_item active"  slider-bg="image/slider/slide1.jpg">
<div class="slider_content">
    <h1>The title</h1>
        <p>Lorem ipsum dolor sit amet, nemo voluptatum accusamus!</p>
</div>

在 jQuery 页面中我有 js 代码：

// DEFINE BACKGROUND DO SLIDE
(function($){
    $('.slider_item').each(function(){
        var sliderBg = $(this).attr('slider-bg');
        $(this).css({'background-image': 'url("http://localhost/wordpress/wp-content/themes/photographysite/"'+sliderBg+')'});
    });
}(jQuery));

目标是将url传递给CSS

    element.style { background-image: url('http://localhost/wordpress/wp-content/themes/photographysite/image/slider/slide1.jpg');

}

http://localhost/wordpress/wp-content/themes/photographysite/image/slider/slide1.jpg 不起作用，那么如何将 url 参数与图像一起传递？

Answer 1

我设法复制了错误。我做了一些事情来纠正这个问题。

---

1) 我通过我的functions.php 文件加载了.css 和.js 文件，这些文件将包含（或创建）在每个Wordpress 主题中。如果您需要帮助，请关注LINK。

---

2) 更改了slider.js 中的编码以使用我的完整本地路径。例如，我的是http://localhost/sliderJSreplica.com/wp-content/themes/twentyseventeen/。所以我的整个代码是：

(function($){
    $('.slider_item').each(function(){
        var sliderBg = $(this).attr('slider-bg');
        $(this).css({'background-image': 'url(http://localhost/sliderJSreplica.com/wp-content/themes/twentyseventeen/'+sliderBg+')'});
    });
}(jQuery));

请注意我的撇号所在的位置，因为您可能放错了位置。

---

3) 根据每张幻灯片将属性slider-bg 的HTML 标记为slider-bg="image/slider/slide1.jpg">。

---

我希望这对你有用！如果没有，我很乐意通过 TeamViewer 提供一对一支持来进一步提供帮助。

Answer 2

首先，我认为您在 Wordpress 中使用 jQuery 时可能会遇到我以前遇到的问题。尝试在 function 开始之前添加此 variable 并将所有 $ 替换为 j。

var j = jQuery.noConflict();

其次，请将 Wordpress 问题发送至Wordpress Stack Exchange。它将帮助您更快地找到答案。