Appending content on "onSlideBefore"

I am currently trying to do a lazy load of elements in my slider(which is text) and I am using ajax to fetch content from my server.

The problem is, when I fetch the content (a couple paragraphs of stuff) the slider does not respond with the correct height after it loads. It only maintains the height of my loading image (gif).

in order for it to show, I need to go back to the last slide, and then reshow the slide that loaded.

(it seems to me that the slider is calculating the height before all of the "onSlideBefore" content is done loading)

Can you please help me figure out how to force the slider to adjust the height to the appended content? Am i using the correct "onSlideBefore" method?

here is some code....

var slider = $('.slider-view').bxSlider({ nextSelector: '#slider-next', prevSelector: '#slider-prev', nextText: 'Onward →', prevText: '← Go back', adaptiveHeight: true, infiniteLoop: false, onSlideBefore: function($slideElement, oldIndex, newIndex){ //var $lazy = $slideElement.find(".lazy") //var $load = $lazy.attr("data-src"); //$lazy.attr("src",$load).removeClass("lazy"); //alert(newIndex);

                var $lazy = $slideElement.find(".lazy")

                // If the element has the lazy class
                if ($lazy[0]){

                    $.ajax({
                        type: 'GET',
                        url: 'api/php/html/profiles/index.php',
                        dataType: "xml",
                        success: function (xml) {
                            $(xml).find('Profile').each(function () {

                                //alert(newIndex);
                                $lazy.append("<p>lazylazylazylazylazylazylazy<p><p>lazylazylazylazylazylazylazy<p><p>lazylazylazylazylazylazylazy<p>");

                            });

                        },
                        error: function () {
                            alert("An error occurred while processing XML file.");
                        }
                    });

                    $lazy.removeClass("lazy");
                    alert("loaded");

                    }

                }

        });

in the body of the html doc....

            <ul class="slider-view">
                <li><div><B>Article 1</B></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>
                <li><div class="lazy"><img src="bxslider/images/loader.gif"></div></li>

            </ul>

stevenwanderski / bxslider-4

Appending content on "onSlideBefore" #238