title: Slider inside another slider with slidesjs
body: <p>I'm trying to put a slider with controls inside of another slider with controls using SlidesJS, meanwhile I did this:</p>
  
  <p><a href="http://jsfiddle.net/3pqvpk8p/7/" rel="nofollow">http://jsfiddle.net/3pqvpk8p/7/</a></p>
  
  <p>JS:</p>
  
  <pre><code>$(function() {
    $('#slides').slidesjs({
      width: 600,
      height: 300,
      callback: {
        loaded: function(number) {
          // Use your browser console to view log
          console.log('SlidesJS: Loaded with slide #' + number);
  
          // Show start slide in log
          $('#slidesjs-log .slidesjs-slide-number').text(number);
        },
        start: function(number) {
          // Use your browser console to view log
          console.log('SlidesJS: Start Animation on slide #' + number);
        },
        complete: function(number) {
          // Use your browser console to view log
          console.log('SlidesJS: Animation Complete. Current slide is #' + number);
  
          // Change slide number on animation complete
          $('#slidesjs-log .slidesjs-slide-number').text(number);
        }
      }
    });
  });
  
  $(function() {
    $('#slides2').slidesjs({
      width: 500,
      height: 175,
      callback: {
        loaded: function(number) {
          // Use your browser console to view log
          console.log('SlidesJS: Loaded with slide #' + number);
  
          // Show start slide in log
          $('#slidesjs-log2 .slidesjs-slide-number2').text(number);
        },
        start: function(number) {
          // Use your browser console to view log
          console.log('SlidesJS: Start Animation on slide #' + number);
        },
        complete: function(number) {
          // Use your browser console to view log
          console.log('SlidesJS: Animation Complete. Current slide is #' + number);
  
          // Change slide number on animation complete
          $('#slidesjs-log2 .slidesjs-slide-number2').text(number);
        }
      }
    });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="slides"&gt;
        &lt;div&gt;
  
     &lt;div id="slides2"&gt;
        &lt;div&gt;
          &lt;img src="http://placehold.it/600x300/c66/fff&amp;text=[slide+1]" width="100%" alt=""/&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;img src="http://placehold.it/600x300/6c6/fff&amp;text=[slide+2]" width="100%" alt=""/&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;img src="http://placehold.it/600x300/36a/fff&amp;text=[slide+3]" width="100%" alt=""/&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;img src="http://placehold.it/600x300/666/fff&amp;text=[slide+4]" width="100%" alt=""/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;div id="slidesjs-log2"&gt;Slide &lt;span class="slidesjs-slide-number2"&gt;1&lt;/span&gt; of 4&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;img src="http://placehold.it/600x300/6c6/fff&amp;text=[slide+2]" width="100%" alt=""/&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;img src="http://placehold.it/600x300/36a/fff&amp;text=[slide+3]" width="100%" alt=""/&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;img src="http://placehold.it/600x300/666/fff&amp;text=[slide+4]" width="100%" alt=""/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;div id="slidesjs-log"&gt;Slide &lt;span class="slidesjs-slide-number"&gt;1&lt;/span&gt; of 4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I have a bug when you change the slide from the inside slider and then change the slide from the external slider, because when you come back to see the internal slider, it is all blank, but when you try change the slide from the internal slider you can see that is was in the correct slide, but just wasnt showing it.</p>
  
  <p>Can anyone help me correct this bug?</p>