0

carouFredSel プラグインを使用して画像スライダーを作成しました。画像の 1 つのカルーセルですべてが正常に動作しますが、サイトの構築を続けるうちにいくつかの問題に遭遇しました。

最初に表示されたカルーセルは正常に動作しますが、右上の IMG リンクをクリックして 2 番目のカルーセルを表示すると、一度に 1 つのアイテムのみを表示するように指示するコードが無視されます。

両方ですべてが同じように設定されていることを確認し、ディスプレイとフロートの変更を試してみましたが、うまくいきませんでした

また、フェードインを設定すると最初のスライダーでも同じことが起こるため、フェードトランジションが原因であるように見えることにも気付きました。

jQueryスクリプトが行う表示変更と関係があると推測

http://coreytegeler.com/new/#work

何か案は？？

$("#web-carousel").carouFredSel({
width: "100%",
height: 450,
direction: "right",
circular: true,
infinite: true,
items: {
    visible: 1,
    width: "variable",
    height: 400,
    width: 720
},
scroll: {
    duration: 1000,
    pauseOnHover: true
},
auto: {
    timeoutDuration: 9999,
    delay: 5000
},
prev: {
    button: "#web-left",
    key: "left"
},
next: {
    button: "#web-right",
    key: "right"
},
pagination: {
    container: "#web-pagination",
    keys: true
},
swipe: true,
mousewheel: false

});

4

1 に答える 1

0

これが問題の原因かどうかはわかりませんが、私が遭遇したのと同じ問題のようです。クリックによってトリガーされる animate() によって表示される非表示の div にカルーセルがあります。カルーセルの初期化をアニメーション後の関数に入れるまで、正しくレンダリングされませんでした-おそらくカルーセルコードが物事のサイズを調べるため、divの準備が整うまでカルーセルが初期化されないようにすることが重要なようでした画像を準備しているとき。だから私がしたことは、関数でカルーセルの初期化をラップすることでした:

var do_carousel = function() {
  $('#carousel').carouFredSel({
    responsive: true,
    circular: false,
    etc...

次に、div を明らかにするコードで、その関数を呼び出します。

$("#carousel-div").animate({
  opacity: 'toggle',
  width: 'toggle',
}, 1200, function() {
  do_carousel();
});

カルーセルの初期化をそこに移動すると、機能し始めました。問題の根本を見つけるのに役立つことを願っています。

于 2013-07-17T03:43:06.957 に答える