title: bxslider within a bxslider - jquery
body: <p>I have a really basic slider using bxslider.</p>
  
  <p>And I would like run another gallery within the bxslider itself.</p>
  
  <p>Please see this fiddle: <a href="http://jsfiddle.net/CHeLE/6/" rel="nofollow">http://jsfiddle.net/CHeLE/6/</a></p>
  
  <p><strong>You can see the secondary gallery always returns the same image when the Gallery Next/Prev is clicked. Why? It should display other images.</strong></p>
  
  <p><br /></p>
  
  <p>It does not make sense why this is happening, please see my code below..</p>
  
  <pre><code>$(function () {
  
      var slider = $('ul#slider').bxSlider({
          infiniteLoop: true,
          controls: false,
          mode: 'horizontal',
          touchEnabled: false,
          pager: false
      });
  
      $('a.slide-next').click(function () {
          slider.goToNextSlide();
          return false;
      });
  
      $('a.slide-prev').click(function () {
          slider.goToPrevSlide();
          return false;
      });
  
  });
  
  $(function () {
  
      var gallery3 = $('#gallery3 ul.gallery').bxSlider({
          infiniteLoop: true,
          controls: false,
          mode: 'fade',
          touchEnabled: false,
          pager: false
      });
  
      $('#gallery3 a.gallery-next').click(function () {
          gallery3.goToNextSlide();
          return false;
      });
  
      $('#gallery3 a.gallery-prev').click(function () {
          gallery3.goToPrevSlide();
          return false;
      });
  
  });
  </code></pre>
  
  <p><br /></p>
  
  <p>And this is my mark up</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
      &lt;ul id="slider"&gt;
  
          &lt;li class="slide" style="background:black"&gt;&lt;/li&gt;
  
          &lt;li id="gallery3" class="slide" style="background:blue"&gt;
  
              &lt;div class="gallery-wrapper"&gt;
  
                  &lt;ul class="gallery"&gt;
  
                      &lt;li&gt;
  
                          &lt;img src="http://www.columbus-international.com/images/heroes/tour_trackday_tuscany.jpg" alt=""/&gt;
                          &lt;img src="http://www.wikipedy.com/images_m/motorbike_kids_s.jpg" alt=""/&gt;
  
                          &lt;img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt=""/&gt;
  
  
                      &lt;/li&gt; 
  
                  &lt;/ul&gt;
  
              &lt;/div&gt;
  
              &lt;a class="gallery-next" href="#"&gt;Gallery Next&lt;/a&gt;
              &lt;a class="gallery-prev" href="#"&gt;Gallery Prev&lt;/a&gt;
  
          &lt;/li&gt;
  
          &lt;li class="slide" style="background:cyan"&gt;&lt;/li&gt;
          &lt;li class="slide" style="background:magenta"&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;a class="slide-next" href="#"&gt;Next&lt;/a&gt;
  &lt;a class="slide-prev" href="#"&gt;Prev&lt;/a&gt;
  </code></pre>
  
  <p>Can anyone please help me understand why my <a href="http://jsfiddle.net/CHeLE/6/" rel="nofollow">fiddle</a> is not working properly?</p>
  
  <p>Thanks in advance.</p>
  
  <p><br /></p>
  
  <p><a href="http://jsfiddle.net/CHeLE/6/" rel="nofollow">http://jsfiddle.net/CHeLE/6/</a></p>