0

私は jquery モバイル Web ショップを構築しましたが、ほとんどすべてが完璧に機能します。

これは私のスクリプト部分です:

$('div[data-role="page"]').live("pageinit",function(event){

$("#foo").carouFredSel({
    responsive  : true,
    scroll      : {
        fx          : "cover-fade"
    },
    items       : {
        visible     : 1,
        width       : 350,
        height      : "100%"
    },
    swipe: {
        onMouse: true,
        onTouch: true
    }
  });
});

応答性が高く、スワイプジェスチャーをサポートしているため、 carouFredSel-pluginを使用したいと考えています。

問題は、ページ ( http://m.wohnfreuden.de ) にアクセスしたときにカルーセルが読み込まれないことです。サイトを更新した後に表示されることもあれば、すべてのスライドが互いに表示されることもあります。

適切な解決策を見つけるのを手伝っていただければ幸いです。

4

1 に答える 1

0

最初の私のアドバイスは、別のカルーセルを見つけることです。私は私の経験から話しています。

1 年前にプラグインを見つけましcarouFredSelた。一見すると、多数の可能なバリエーションを備えた完璧なカルーセルでした (その時点ではスワイプ機能はありませんでしたが、簡単に修正できました)。

残念ながら、アプリのテスト段階で、jQuery Mobile と組み合わせると、何らかの理由でプラグインがランダムにブレーキをかけることが発見されました (jQuery Mobile を使用しないデスクトップ Web アプリでは同じ問題は見つかりませんでした)。プラグインがランダムに初期化をスキップし、画像が次々と表示されます。個人的には、コンテンツの高さがこのプラグインにとって重要であり、jQuery Mobile ページの高さはページ表示中にのみ正しく計算できると考えていますが、それでも問題が発生する可能性があります。

これは、jQuery Mobile でプラグインを初期化するために使用したデモです (概念実証): http://jsfiddle.net/Gajotres/Np3G4/

右から左にスワイプするだけです。

$('#carousel').carouFredSel({
    width: '100%',
    height: 250,
    items: 5,
    auto: false,        
    scroll: {
        items: 1,
        duration: aniConf.duration,
        onBefore: function( data ) {          
            data.items.old.eq(1).animate(cssSmall, aniConf);
            data.items.old.eq(2).animate(cssMedium, aniConf);
            data.items.old.eq(3).animate(cssLarge, aniConf);
            data.items.old.eq(4).animate(cssMedium, aniConf);
        }
    }
});

$("#carousel, #home").bind('swipeleft',function(event, ui){
     $("#carousel").trigger("next", 1);
});

最後に、開発者が過去 1 年間にこの問題を修正しなかった場合は、別の解決策の原因を見つけることをお勧めします。

于 2013-07-19T08:19:42.887 に答える