危险的Swiper不能与Wordpress一起工作

iDangerous Swiper not working with Wordpress

本文关键字：Wordpress 一起 工作 不能 Swiper 危险      更新时间：2023-09-26

第一次在这里问问题，所以我会尽量把礼仪做好:)

我遇到了麻烦，让危险的刷卡工作与我的Wordpress安装。目前它是在BitNami运行的本地安装，所以我不能分享链接，但我会尽我所能解释这种情况。我最好的Google-Fu也找不到答案。

首先，我让Swiper在一个最小的HTML测试页面上运行得很好，按照http://www.idangero.us/sliders/swiper/api.php的使用说明。

头例子

<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建议:

// 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中加载，但不能在页面上运行。

我还尝试将初始化头部滑动器的小脚本转移到一个单独的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移到了我的主样式表中。这一面正在按预期工作

任何帮助都将是非常感激的。

Pete。

很抱歉这么晚才回复，刚刚看到你的回复。问题很简单，在你的starswiper .js文件中，用jQuery替换$，如

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

实际上必须使用这个

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。

相关文章：