0

jquery cycle2 を初めて使用します。スライドが画像の場合はうまく機能しますが、スライドがアンカーの場合は、指定した scrollHorz トランジション効果を使用しません。代わりに、トランジションはアンカーの右上から伸びます。

以下のコードでは、最初のスライドショーは期待どおりに動作し、2 番目のスライドショーでは、トランジション効果は不明なタイプ (scrollHorz ではありません) です。

<div class="page">

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollHorz
        data-cycle-timeout=0
        >

        <!-- empty element for caption -->
        <div class="cycle-caption"></div>

        <!-- prev/next links -->
        <div class="cycle-prev"></div>
        <div class="cycle-next"></div>
        <img src="../Images/top-mod1.png" />
        <img src="../Images/top-mod2.png" />
        <img src="../Images/top-mod3.png" />
        <img src="../Images/top-mod4.png" />
    </div>

    <div class="cycle-slideshow" 
        data-cycle-slides="a"
        data-cycle-fx=scrollHorz
        data-cycle-timeout=0
        >

        <!-- empty element for caption -->
        <div class="cycle-caption"></div>

        <!-- prev/next links -->
        <div class="cycle-prev"></div>
        <div class="cycle-next"></div>
        <a href="http://www.google.com"><img src="../Images/top-mod1.png" /></a>
        <a href="http://www.yahoo.com"><img src="../Images/top-mod2.png" /></a>
        <a href="http://www.facebook.com"><img src="../Images/top-mod3.png" /></a>
        <a href="http://www.weather.com"><img src="../Images/top-mod4.png" /></a>
    </div>

</div>
4

3 に答える 3

1

私は同じ問題を抱えていましたが、次のようにアンカータグの幅と高さを指定することで、CSS で修正できました。

.cycle-slideshow a { 
    display: block; 
    width: 635px; 
    height: 345px;
}

画像のサイズに合わせて幅と高さを変更してください。

これが役立つことを願っています！

于 2013-12-08T06:45:44.427 に答える
0

私は div を使用して同じ問題に遭遇していました。修正は、CSS を使用してスライド div の幅を 100% に設定することでした。これにより、特定のサイズを設定する必要がなくなりました。

于 2014-05-24T00:12:27.160 に答える