Jquery Cycle2 Progessive Loading表示<script>タグ

Question

jquery cycle2をセットアップして、一連の画像を順次ロードしようとしています。画像をロードする必要があるページに複数の ".slider" オブジェクトがありますprogressivelly

これはこれはJavascript

$('.slider').each(function() { 
 
    var $this = $(this); 
 

 
    $this.cycle({ 
 
     slides: '> img', 
 
     sync: true, 
 
     progressive: function() { 
 
      var slides = $('.other-slides', $this).html(); 
 
      return $.parseJSON(slides); 
 
     }, 
 
     speed: 1500, 
 
     timeout: 4000, 
 
     loader: true 
 
    }); 
 
});

あるHTML

<li class="slider"><img title="Company Name" alt="Company Name" src="/photos/listings/company-name6.jpg"> 
 
<script class="other-slides" type="text/cycle">[<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide1.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide2.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide3.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide4.jpg'> 
 
]</script></li>

です 最初の画像が表示されてからサイクルを示してこれを示します Result

Answer 1

あなたはほぼあります。 cycle2ウェブサイトのprogressive exampleを見ると、スクリプトタグにはロードするスライドのJSON配列が含まれている必要があることに注意してください。個々のスライドは二重引用符で囲む必要があり、スライドはカンマで区切ります。ここで

は、プログレッシブスライド用に更新JSONです：

<script class="other-slides" type="text/cycle"> 
[ 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide1.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide2.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide3.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide4.jpg'>" 
] 
</script> 

そして、ここではworking fiddleです。