1

同様のトピックと次の著者の問題の継続： Cylcle2サイクルページャーが表示されない

まったく同じ問題が発生しています。残念ながら、前述のスレッドでは、この問題に対する直接的な解決策は提供されていません。

問題をデバッグするために、cycle2デモからコードを直接コピーし、他のコードを完全に除外するところまで来ました: http://jquery.malsup.com/cycle2/demo/pager.php

<div class="cycle-slideshow" 
data-cycle-fx=scrollHorz
data-cycle-timeout=2000
>
<!-- empty element for pager links -->
<div class="cycle-pager"></div>

<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>

また、Web サイトに記載されている CSS コードをダウンロードして含めました。

リンク: http://jquery.malsup.com/cycle2/demo/demo-slideshow.css

ページャーを参照する CSS コードのスニペット:

 /* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}

さて、実際の問題について：

文字通りすべてのコードをコピーし、正しい JavaScript スクリプトを含めて、サーバーにアップロードしたことに注意してください。

私がテストするとき; javascript が機能しているように見えます。マウスを画像の上に置くと、cycle.pager が実際に機能しているように見えます。

ただし、何を試しても、CSS コードは 100% 機能していないようです。私の理論では、何らかの理由で .cycle-pager スパンやその他のクラスを把握していないため、正しく表示されないのですが、Cycle2 Web サイトでどのように機能する可能性があるのでしょうか?

私はここで完全に途方に暮れています - そしてそれを理解しようと必死です. お返事をお待ちしております - よろしくお願いします！

4

1 に答える 1