本地主机中的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）我通过我的.css文件加载了.js和functions.php文件，该文件将包含（或创建）每个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的问题。尝试在你的variable开始之前添加这个function并用$替换所有的j。

var j = jQuery.noConflict();

其次，请将Wordpress问题提交给Wordpress Stack Exchange。它可以帮助您更快地找到答案。