ResponsiveSlide.js not working properly

Question

I am trying to create a slide show for my dynamically created images. The directory path to the images is returned as a response from ajax call and again another ajax call is made which would create html structure for my slideshow and return it as response which I append it to the html.

Now, I am using ResponsiveSlide.js for creating a slide show. Everything works fine and html response return is also verified as it does contain proper image path (I verified by separately loading images from url) but somehow slideshow does not happen and only one image is displayed.

Here is the JS:

$(function() {
   $("#slider1").responsiveSlides({
        maxwidth: 1000,
        speed: 800
      });
});

The HTML code is:

<ul class="rslides" id="slider1"></ul>

The response returned is:

<li><img src="resources/images/Screenshots/Booking/Final.jpg"></li>
<li><img src="resources/images/Screenshots/Booking/0AFinal.jpg"></li>
<li><img src="resources/images/Screenshots/Booking/0BFinal.jpg"></li>

The JS code to append this response to HTML ul element is:

$.ajax({

            url: "/prismweb/results?directoryPath="+response,
            success: function (data) {
                $("#loading").hide();   //to hide the loading icon after ajax is completed
                $("#slider1").append(data);
            }
        });

JS and CSS added:

    <script type="text/javascript" src="resources/js/jquery-2.1.4.min.js </script>

   <script type="text/javascript" src="resources/js/responsiveslides.min.js"></script>

Everything looks fine in the console and all the images are there when I look up at web elements during debug but only first li image is displayed and no slideshow happens. Could anyone let me know whats wrong here? Is there any other way of doing it?

Answer 1

add double colon to parameter like "maxwidth" and "speed" as below ..Thank

$(function() {
   $("#slider1").responsiveSlides({
        "maxwidth": 1000,
        "speed": 800
      });
});