0

JavaScript を使用してブログにパララックス スライダーを追加しようとしています。

これを達成するための調査で、ブログにスライダーを含めることに関するこのチュートリアルに出会いました。チュートリアルを使用して、別のスライダー (Mary Lou の視差スライダー) を実装するために与えられた手順に従いました。zip ファイルには3 つの JavaScript ファイルが含まれていましたが、ブロガー テンプレートでそのうちの 1 つだけを参照しました (Google サイトのページにアップロード)。次に CSS を追加し、ナビゲーション画像と背景画像をブログにアップロードしてリンクを抽出し、最後に以下に引用した html を追加しました。

<div id="pxs_container" class="pxs_container">
<div class="pxs_bg">
    <div class="pxs_bg1"></div>
    <div class="pxs_bg2"></div>
    <div class="pxs_bg3"></div>
</div>
<div class="pxs_loading">Loading images...</div>
<div class="pxs_slider_wrapper">
    <ul class="pxs_slider">
        <li><img src="http://3.bp.blogspot.com/-ytZq9IQR2pA/Ucfbyp3gqII/AAAAAAAAACg/FrLRuE8lsGY/s1600/1.jpg" alt="First Image" /></li>
        <li><img src="http://1.bp.blogspot.com/-GOiswNwepaA/UcfbxPrx0yI/AAAAAAAAACY/orZUpjDa8_8/s1600/2.jpg" alt="Second Image" /></li>
        <li><img src="http://3.bp.blogspot.com/-tkqv4l0OW-o/UcfbvyPcA_I/AAAAAAAAACQ/SdsW2kEmRrE/s1600/3.jpg" alt="Third Image" /></li>
        <li><img src="http://2.bp.blogspot.com/-9sWga6Z1-b4/UcfbupMObgI/AAAAAAAAACI/NNH4v7GoWPs/s1600/4.jpg" alt="Fourth Image" /></li>
        <li><img src="http://3.bp.blogspot.com/-mQV4AV6cuxA/UcfbtqN14WI/AAAAAAAAACA/Jjn7RKmpDrs/s1600/5.jpg" alt="Fifth Image" /></li>
         <li><img src="http://1.bp.blogspot.com/-3Ldx-SSb8So/UcfbsuOUCyI/AAAAAAAAAB0/LiI3qwOi90Q/s1600/6.jpg" alt="Sixth Image" /></li>
                </ul>
    <div class="pxs_navigation">
        <span class="pxs_next"></span>
        <span class="pxs_prev"></span>
    </div>
    <ul class="pxs_thumbnails">
        <li><img src="http://3.bp.blogspot.com/-ytZq9IQR2pA/Ucfbyp3gqII/AAAAAAAAACg/FrLRuE8lsGY/s1600/1.jpg" alt="First Image" /></li>
        <li><img src="http://1.bp.blogspot.com/-GOiswNwepaA/UcfbxPrx0yI/AAAAAAAAACY/orZUpjDa8_8/s1600/2.jpg" alt="Second Image" /></li>
        <li><img src="http://3.bp.blogspot.com/-tkqv4l0OW-o/UcfbvyPcA_I/AAAAAAAAACQ/SdsW2kEmRrE/s1600/3.jpg" alt="Third Image" /></li>
        <li><img src="http://2.bp.blogspot.com/-9sWga6Z1-b4/UcfbupMObgI/AAAAAAAAACI/NNH4v7GoWPs/s1600/4.jpg" alt="Fourth Image" /></li>
        <li><img src="http://3.bp.blogspot.com/-mQV4AV6cuxA/UcfbtqN14WI/AAAAAAAAACA/Jjn7RKmpDrs/s1600/5.jpg" alt="Fifth Image" /></li>
        <li><img src="http://1.bp.blogspot.com/-3Ldx-SSb8So/UcfbsuOUCyI/AAAAAAAAAB0/LiI3qwOi90Q/s1600/6.jpg" alt="Sixth Image" /></li>

    </ul>
</div>

いくつかの画像とスライド効果を期待していましたが、下のスクリーンショットに示すように永遠にロードされます

永遠に読み込んでいます

ライブ サイトはhttp://a-mouthful-of-recipes-about-us.blogspot.in/で見ることができます。

HTML に何が欠けているのかわかりません。画像とスライダーが表示されるようにするには、何を含める必要がありますか?

4

0 に答える 0