Executing code from within a slider
<p>My boss wants this functionality so I know it's convoluted. I'm essentially trying to have a slider within a slider. There will be a slider that moves divs in and out but also slider on each div that moves their own divs in and out. The Problem is the code on the inner div is not geting run because it isn't on the page when in loads. Anyway, can execute it after the slider moves?</p>

<p>I'm using <a href="http://bxslider.com" rel="nofollow">bxslider</a></p>

<p>Here's the markup:</p>

<pre><code>&lt;div id="slider1"&gt;

    &lt;div class="food"&gt;

        &lt;div class="inner_slide"&gt;

            &lt;div id="slider2"&gt;

                &lt;div class="fruit"&gt;Apples&lt;/div&gt;
                &lt;div class="fruit"&gt;Pears&lt;/div&gt;

            &lt;/div&gt;

        &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="drinks"&gt;

        &lt;div class="inner_slide"&gt;

            &lt;div id="slider3"&gt;

                &lt;div class="fruit"&gt;Water&lt;/div&gt;
                &lt;div class="fruit"&gt;Tea&lt;/div&gt;

            &lt;/div&gt;

        &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>Here's the jQuery</p>

<pre><code>$(function(){
  $('#slider1').bxSlider({
    infiniteLoop: false,
    hideControlOnEnd: true,
    pager: true,
    randomStart: true
  });

  $('#slider2').bxSlider({
    mode: 'fade',
    captions: true,
    auto: true,
    controls: false,
    randomStart: true
  });

  $('#slider3').bxSlider({
    mode: 'fade',
    captions: true,
    auto: true,
    controls: false,
    randomStart: true
  });
});
</code></pre>
