0

ここで初めて質問するので、エチケットを正しく取得しようとします:)

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 (上記の本文の例のように) はインタラクティブになりません。スクリプト ファイルが Firebug に読み込まれたように見えますが、まだ有効になっていません。

WordPressコーデックスが示唆するように、スクリプトを「エンキュー」して実験しました：

// 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メインのスタイルシートに移行したことに注意してください。こちら側は期待通りに動いています。

どんな助けでも大歓迎です。

ピート。

4

2 に答える 2

1

返信が遅くなり申し訳ありません。今あなたの回答を見ました。問題は単純です。startswiper.js ファイルで、$ を jQuery に置き換えます。

jQuery(function(){
    var mySwiper = jQuery('.swiper-container').swiper({
        //Your options here:
        mode:'horizontal',
        loop: true
        //etc..
    });
})
于 2013-07-24T15:27:32.703 に答える