0

私は Malsup のすばらしい jQuery サイクル プラグインを試していて、ちょっとした問題にぶつかりました。トランジション div で混合コンテンツを使用していますが、うまくいきました。この問題は、遷移 div 内でページャーを使用すると発生します。基本的に、各 div に沿ってページャー リンクを遷移させたいので、各遷移 div 内にページャー div を含めました。

$(document).ready(function() { $('#slider').cycle ({ fx: 'scrollLeft', timeout: 10000, speed: 500, pager: '#pager' }); }); 画像 テキスト テキスト テキスト 今すぐお試しください！ 
        <!-- Content Display 1 -->
        <div id="cs_1" class="show_content clearb">
            <div class="">IMAGE</div>
            <div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="button gradient3" style="height: 57px; width: 180px; margin-top: 20px;">
                <a href ="signup.php"><div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div></a>
            </div>
            <div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;">b</div>
        </div>
        <!-- Content Display 1 -->

        <!-- Content Display 2 -->
        <div id="cs_2" class="show_content clearb">
            <div class="">IMAGE</div>
            <div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="button gradient3" style="height: 57px; width: 180px; margin-top 26px;">
                <a href ="signup.php"><div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div></a>
            </div>
            <div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;"></div>
        </div>
        <!-- Content Display 2 -->

        <!-- Content Display 3 -->
        <div id="cs_3" class="show_content clearb">
            <div class="">IMAGE</div>
            <div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="button gradient3" style="height: 57px; width: 180px; margin-top 18px;">
                <a href ="signup.php"><div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div></a>
            </div>
            <div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;"></div>
        </div>
        <!-- Content Display 3 -->

ページャーは最初のスライドで問題なく表示され、希望どおりにトランジションします。最初の 2 つのページャー div に入力したテスト文字は表示されますが、次の 3 つのトランジションでは表示されません。ここで私が見逃しているのは何ですか？

4

1 に答える 1