BxSlider with Thumbnails - Thumbnails dont slide along with the slider

Question

I'm trying to fix a thumbnail BxSlider to work properly. I'm struggling with those:

1) When clicking on a thumbnail image the thumbnail slider has to slide along with the main slider.

2) And also making the main slider dragable. In order to change slides with the mouse.

3) The thumbnail arrows dont move the slides.

I've made an JSFIDDLE for you to see

And this is my my js code:

$(function() {

  var initThumbnailsSlider = function(object) {

    var $bxSlider = $(object);

    if ($bxSlider.length < 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: "<i class='icm icm-Arrow_right'></i>",
      prevText: "<i class='icm icm-Arrow_left'></i>",
      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]');
});

Thanks a lot.

============================================

I've made a little search and i updated my JSFIDDLE

And I changed that part of my js code:

But sometimes it freezes :/

  $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);
    }

Answer 1

I've used BxSlider before and haven't tried the slider you want to achieve. However, If you won't mind, I suggest that you try Slick. Below is a sample code that perfectly achieve what you want for your slide with lesser blocks of codes.

$('.product-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.custom-pager'
});
$('.custom-pager').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.product-slider',
  dots: false,
  centerMode: true,
  focusOnSelect: true
});

.custom-pager .img-container {
  width: 167px;
  height: 165px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

.product-slider .img-container {
  height: 525px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

.slide a{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<ul class="bxslider product-slider">

                  <!-- li.item -->
                  <li class="slide">
                    <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
                    </div>
                  </li>
                  <!-- li : end -->

                  <!-- li.item -->
                  <li class="slide">
                    <div class="img-container" style="background-color: #f8f8f8; background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
                    </div>
                  </li>
                  <!-- li : end -->

                  <!-- li.item -->
                  <li class="slide">
                    <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
                    </div>
                  </li>
                  <!-- li :end -->

                  <!-- li.item -->
                  <li class="slide">
                    <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
                    </div>
                  </li>
                  <!-- li :end -->
</ul>
 <ul id="bx-pager" class="custom-pager">

                  <!-- li.item -->
                  <li class="slide">
                    <a class="block" data-slide-index="0">
                      <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
                      </div>
                    </a>
                  </li>
                  <!-- li : end -->

                  <!-- li.item -->
                  <li class="slide">
                    <a class="block" data-slide-index="1">
                      <div class="img-container" style="background-color: #f8f8f8;  background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
                      </div>
                    </a>
                  </li>
                  <!-- li : end -->

                  <!-- li.item -->
                  <li class="slide">
                    <a class="block" data-slide-index="2">
                      <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
                      </div>
                    </a>
                  </li>
                  <!-- li : end -->


                  <!-- li.item -->
                  <li class="slide">
                    <a class="block" data-slide-index="3">
                      <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
                      </div> 
                    </a>
                  </li>
                  <!-- li : end -->

                </ul>