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: "",
      prevText: "",
      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);
    }

Albert Israel · Accepted Answer

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

BxSlider with Thumbnails - Thumbnails dont slide along with the slider

Answers (2)

UPDATE

`PLUNKER`

`FIDDLE`

Related Questions