jquery - 本地主机中的 WordPress slider url 问题

Question

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

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 提供一对一支持来进一步提供帮助。