Question

第一次在这里问一个问题所以我会试着让礼仪正确：）

我无法使用iDangerous swiper来处理我的Wordpress安装。目前它是在BitNami中运行的本地安装，因此我无法共享链接，但我会尽力解释这种情况。我最好的Google-Fu无法找到答案。

首先，根据http://www.idangero.us/sliders/swiper/api.php的使用说明，我在最小的HTML测试页面上运行了Swiper。

头部示例

<link rel="stylesheet" href="idangerous-swiper.css">
<script defer src="idangerous-swiper-1-9-4-min.js"></script>
<script type="text/javascript">
window.onload = function() {
    var mySwiper = new Swiper('.swiper-container',{
        //Your options here:
        mode:'horizontal',
        loop: true
        //etc..
    });  
}
</script>

身体示例

<div class="swiper-container">
    <div class="swiper-wrapper">

        <!--First Slide-->
        <div class="swiper-slide">
        <p>Slide One</p>
        </div>

        <!--Second Slide-->
        <div class="swiper-slide">
        <p>Slide Two</p>
        </div>

        <!--Third Slide-->
        <div class="swiper-slide">
        <p>Slide Three</p>
        </div>

    </div>
</div>

上述函数在最小测试中的预期功能，但如果我在wordpress网站的header.php中执行相同的操作，则使用相应的类标记的HTML（根据上面的Body示例）不会变为交互式。脚本文件似乎已加载到Firebug中，但仍未生效。

我已尝试使用WordPress codex建议的“enqueing”脚本：

// Adds swiper js
function MyTheme_swiper() {
wp_enqueue_script(
    'mtswiper',
    get_template_directory_uri() . '/../mychildtheme/js/idangerous-swiper194.js',
    array( 'jquery' )
);
}

add_action( 'wp_enqueue_scripts', 'MyTheme_swiper' );

但这有相同的结果;该脚本在Firebug中加载，但不在页面上运行。

我还尝试将初始化swiper的小脚本从头部转移到一个单独的JS文件中，然后也将其命名。同样，新脚本出现在Firebug的网络监视器中，但不会运行。

怀疑jQuery可能成为问题，我将所有$个快捷方式更改为jQuery，这是Worpress Codex的另一个提示。

jQuery(function(){
var mySwiper = jQuery('.swiper-container').swiper({
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
});
})

但仍然没有骰子。

不确定从这里可以去哪里。我可以很好地找到HTML和CSS，但PHP和JS仍然让我的大脑受伤。

请注意，在早期，我将Swiper CSS从默认的idangerous-swiper.css转移到我的主样式表中。它的这一方面按预期工作。

非常感谢任何帮助。

皮特。

Answer 1

很抱歉这么晚的回复，只看到了你的回答。问题很简单，在你的startswiper.js文件中，用jQuery替换$，比如

jQuery(function(){
    var mySwiper = jQuery('.swiper-container').swiper({
        //Your options here:
        mode:'horizontal',
        loop: true
        //etc..
    });
})

Answer 2

实际上必须使用这个

function MyTheme_swiper() {
wp_enqueue_script(
    'mtswiper', get_template_directory_uri() . '/../mychildtheme/js/idangerous-swiper194.js',
array( 'jquery' ), false, true
);
}
add_action( 'wp_enqueue_scripts', 'MyTheme_swiper' );

必须检查https://developer.wordpress.org/reference/functions/wp_enqueue_script/

此处的目标是将 script 放入 footer。默认情况下它会转到 header。

iDangerous Swiper无法使用Wordpress

2 个答案: