Re-initiating bxSlider for ajax-loaded content via jscroll
<p>I am having content that spans over multiple pages. Via <a href="https://github.com/pklauzinski/jscroll" rel="nofollow">jscroll</a> I can successfully append the further pages’ content to my current page. I am using a button to initiate the loading of the additional content.</p>

<p>Throughout my pages I use multiple <a href="http://bxslider.com/options" rel="nofollow">bxSlider</a> carousels that stop working for the appended, AJAX-loaded content since bxSlider obviously gets fired (and needs to be, as the documentation states) on pageload, so it misses any new sliders in the AJAX-loaded content. </p>

<p>Now, bxSlider has a as a reloadSlider function, which though does not seem to recognise newly added sliders after initial page loading, it seems to be solely for adding new slides to existing sliders. </p>

<p>Is there a way to trigger bxSlider to re-evaluate the page’s current content state and handle new sliders that get added when the button for jscroll is being clicked (possibly handling any delay that fetching the content creates)? </p>

<p>Here just a rough sketch of the constellation:</p>

<pre><code>&lt;div id="outer_wrapper"&gt;
    &lt;div id="content_wrapper"&gt;
        &lt;!-- My initial content --&gt;
        &lt;div id="somediv"&gt;...&lt;/div&gt;
        &lt;div id="somediv2"&gt;...&lt;/div&gt;
        &lt;div id="somediv3" class="author_slider"&gt;My first carousel&lt;/div&gt;
        &lt;div id="somediv4"&gt;...&lt;/div&gt;
        &lt;div id="somediv5"&gt;...&lt;/div&gt;
        &lt;a href="page2.php" class="loadcontent"&gt;Load more content&lt;/a&gt;

        &lt;!-- My AJAX-loaded second page, bxSlider fails --&gt;
        &lt;div id="somediv6"&gt;...&lt;/div&gt;
        &lt;div id="somediv7"&gt;...&lt;/div&gt;
        &lt;div id="somediv8" class="author_slider"&gt;My second carousel&lt;/div&gt;
        &lt;div id="somediv9"&gt;...&lt;/div&gt;
        &lt;div id="somediv10"&gt;...&lt;/div&gt;
        &lt;a href="page3.php" class="loadcontent"&gt;Load more content&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Edit: This is my JS for bxSlider and jscroll:</p>

<pre><code>// Slider — Widget Authors
jQuery(document).ready(function(jQuery) {
    jQuery('.author_slider ul').bxSlider({
        minSlides: 3,
        maxSlides: 5,
        slideWidth: 104,
        speed: 500,
        pager: true,
        nextSelector: '.nextLink',
        prevSelector: '.prevLink'
    });
});


// JScroll
jQuery(document).ready(function(jQuery) {
    jQuery('#content_wrapper').jscroll({
        loadingHtml: '&lt;div class="loadcontent loading"&gt;&lt;a&gt;Loading …&lt;/a&gt;&lt;/div&gt;',
        nextSelector: '.loadcontent',
        contentSelector: '#content_wrapper',
        autoTrigger: false
    });
});
</code></pre>