Jquery Cycle2 漸進式加載顯示<script> tag

Question

我正在嘗試設置 jQuery cycle2 以逐步加載一組圖像。 頁面上有多個.slider對象需要逐步加載圖像。

這是 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>

這是 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 }); });

顯示初始圖片，然后循環並顯示此結果

Answer 1

你快到了。 如果您查看 cycle2 網站上的漸進式示例，它會注意到腳本標簽需要包含要加載的幻燈片的 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>

這是一個工作小提琴。