title: BxSlider with Thumbnails - Thumbnails dont slide along with the slider
body: <p>I'm trying to fix a thumbnail BxSlider to work properly. I'm struggling with those:</p>
  
  <p>1) When clicking on a thumbnail image the thumbnail slider has to slide along with the main slider. </p>
  
  <p>2) And also making the main slider dragable. In order to change slides with the mouse.</p>
  
  <p><del>3) The thumbnail arrows dont move the slides.</del></p>
  
  <p>I've made an <a href="https://jsfiddle.net/timosergio/vndgwg4p/1/" rel="nofollow noreferrer">JSFIDDLE</a> for you to see </p>
  
  <p>And this is my  my js code:</p>
  
  <pre><code>$(function() {
  
    var initThumbnailsSlider = function(object) {
  
      var $bxSlider = $(object);
  
      if ($bxSlider.length &lt; 1) {
        return;
      }
  
      $bxSlider.bxSlider({
        controls: false,
        pagerCustom: '#bx-pager',
        easing: 'easeInOutQuint',
        infiniteLoop: true,
        speed: 500
      });
  
      $('.bx-custom-pager').bxSlider({
        mode: 'horizontal',
        maxSlides: 4,
        minSlides: 2,
        slideWidth: 156,
        slideMargin: 25,
        easing: 'easeInOutQuint',
        controls: true,
        nextText: "&lt;i class='icm icm-Arrow_right'&gt;&lt;/i&gt;",
        prevText: "&lt;i class='icm icm-Arrow_left'&gt;&lt;/i&gt;",
        pager: false,
        moveSlides: 1,
        infiniteLoop: false,
        speed: 500,
        onSlideBefore: bxMove
  
      });
  
      function bxMove($ele, from, to) {
        var idx = parseInt(to, 10) - 1;
        bx.goToSlide(idx);
      }
  
    };
  
  
    // execute the function
    initThumbnailsSlider('[data-bx-slider]');
  });
  </code></pre>
  
  <p>Thanks a lot.</p>
  
  <p>============================================</p>
  
  <p>I've made a little search and i updated my <a href="https://jsfiddle.net/timosergio/vndgwg4p/9/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <p>And I changed that part of my js code: </p>
  
  <p>But sometimes it freezes :/</p>
  
  <pre><code>  $bxPager.bxSlider({
        mode: 'horizontal',
        maxSlides: 4,
        minSlides: 2,
        slideWidth: 156,
        slideMargin: 25,
        easing: 'easeInOutQuint',
        controls: true,
        pager: false,
        moveSlides: 1,
        speed: 500,
        onSlideBefore: bxMove
  
      });
  
  
      function bxMove($ele, from, to) {
        var idx = parseInt(to, 10) - 1;
        $bxSlider.goToSlide(idx);
      }
  </code></pre>