Плагин jquery carrousel не работает, когда я динамически добавляю элементы из файла XML

Question

Я пытаюсь динамически добавлять элементы в плагин jquery карусели. Элементы добавляются, когда карусель игнорирует их.

Карусель берет из этого элементы, которые нужно показать:

<div class="viewport">
    <ul class="overview">
        <li><img src="images/picture6.jpg" /></li>
        <li><img src="images/picture5.jpg" /></li>
        <li><img src="images/picture4.jpg" /></li>                  
        <li><img src="images/picture2.jpg" /></li>
        <li><img src="images/picture1.jpg" /></li>
    </ul>
</div>

Я читаю XML-файл и добавляю элемент в обзор UL.

  $(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "categories.xml",
        dataType: "xml",
        success: xmlParser
    });
  });

function xmlParser(xml) {
    $(xml).find('categories').eq(0).find('category').each(function () {
        $(".overview").append('<li><img src="images/picture6.jpg" /></li>');
    });
}

Если я открою исходный код, я смогу увидеть все новые элементы внутри UL, но карусель действует так, как если быисходные.

Почему это происходит?

Пример, над которым я работаю: http://demos.koalamedia.es/example/

Answer 1

Вам нужно заново запустить карусель после добавления новых изображений.

Попробуйте изменить функцию AJAX на это:

$.ajax({
    type: "GET",
    url: "categories.xml",
    dataType: "xml",
    success: function() {
        xmlParser();
        $('#slider1').tinycarousel();
    }
});