Jquery Cycle2 Progessive Loading displaying <script> tag

I am trying to setup jQuery cycle2 to progressively load a set of images. There are multiple .slider objects on the page which need to load images progressively.

This is the 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>

This is the 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
    });
});

The initial picture is shown and then it cycles and shows this Result

Solution

You're almost there. If you look at the progressive example on the cycle2 website it notes that the script tag needs to contain a JSON array of the slides to be loaded. Each individual slide needs to be wrapped in double quotes and the slides separated with a comma.

Here's the updated JSON for the progressive slides:

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

And here's a working fiddle.