0

私はcycle2を使用しており、プログラムで別のscripts.jsファイルに設定しています。プログレッシブローディングを追加する前までは、スライダーはすべてうまく機能しています。ページに複数のスライダーがあるため、次のように設定しました。

$('.slider').each(function () {
    var $this = $(this);
    $this.cycle({
        fx: 'scrollHorz',
        slides: '> a',
        sync: true,
        progressive: slides,
        speed: 'fast',
        timeout: 0,
        autoHeight: 'container',
        next: $this.next('.slider-navigation').find('.next'),
        prev: $this.next('.slider-navigation').find('.prev'),
        loader: true
    });
});

そして、例として、各スライダーの HTML マークアップは次のとおりです。

<div class="slider">
    <a href="/">
        <img src="example.jpg">
    </a>
    <script class="other-slides" type="text/cycle">
        var slides = [
            "<a href=" / "><img src="
            another - example.jpg " /></a>",
            "<a href=" / "><img src="
            another - example.jpg " /></a>",
            "<a href=" / "><img src="
            another - example.jpg " /></a>"
        ];
    </script>
</div>

ただし、ページをロードすると、コンソールに次のように表示されます: init が script.js にあり、このマークアップが別のページにあるため、これはReferenceError: slides is not defined理にかなっていますが、どうすればこれを機能させることができますか、またはより良い方法がありますか? cycleページには複数のスライダーがあることに注意してください。

ありがとう、R

4

2 に答える 2

1

サイクル 2 のプログレッシブ デモでは、スクリプト タグに ID があり、これを使用して追加のスライドを参照し、プログレッシブにロードします。複数のスライドショーを扱っているため、ID を使用できないことは明らかです。最初は、前のコントロールと次のコントロールの処理方法に同様のアプローチを適用できると考えていました。ただし、Cycle 2 ソースの 1374 行$()を見ると、関数が使用されており、セレクター文字列が必要であることがわかります。幸いなことに、文字列を渡すときに使用されるアプローチを模倣できる関数も受け入れます。

JSON データ内の属性の引用に注意する必要があります。各スライドは二重引用符で囲み、属性には一重引用符を使用します。また、JSON を script タグの変数に割り当てても機能しません。

更新されたjsは次のとおりです。

$('.slider').each(function () {
    var $this = $(this);
    $this.cycle({
        fx: 'scrollHorz',
        slides: '> a',
        sync: true,
        progressive: function() {
           var slides = $('.other-slides', $this).html();
           return $.parseJSON( slides );
        },
        speed: 'fast',
        timeout: 0,
        autoHeight: 'container',
        next: $this.next('.slider-navigation').find('.next'),
        prev: $this.next('.slider-navigation').find('.prev'),
        loader: true
    });
});

およびhtml：

<div class="slider">
    <a href="/">
        <img src="example.jpg">
    </a>
    <script class="other-slides" type="text/cycle">
    [
        "<a href='/'><img src='example2.jpg' /></a>",
        "<a href='/'><img src='example3.jpg' /></a>",
        "<a href='/'><img src='example4.jpg' /></a>"
    ]
    </script>
</div>

そして、ここにフィドルがあります：http://jsfiddle.net/N7tgL/

于 2014-03-27T06:26:06.537 に答える