При первой загрузке контента проблема с гладкой миниатюрой, есть ли способ ее исправить?

Question

При первой загрузке контента инициализация миниатюры останавливается на одном элементе. Это выглядит так:

После прокрутки миниатюры или нажатия на стрелку все выравнивается, как и должно быть. Кроме того, проблема не повторяется, если контент просматривается более одного раза.

_setActiveThumbnail: function(imageId) {
      // If there is no element passed, find it by the current product image
      if (typeof imageId === 'undefined') {
        imageId = $(
          this.selectors.productImageWraps + ':not(.hide)',
          this.$container
        ).data('image-id');
      }

      var $thumbnailWrappers = $(
        this.selectors.productThumbListItem + ':not(.slick-cloned)',
        this.$container
      );

      var $activeThumbnail = $thumbnailWrappers.find(
        this.selectors.productThumbImages +
          "[data-thumbnail-id='" +
          imageId +
          "']"
      );

      $(this.selectors.productThumbImages)
        .removeClass(this.classes.activeClass)
        .removeAttr('aria-current');

      $activeThumbnail.addClass(this.classes.activeClass);
      $activeThumbnail.attr('aria-current', true);

      if (!$thumbnailWrappers.hasClass('slick-slide')) {
        return;
      }

      var slideIndex = $activeThumbnail.parent().data('slick-index');

      $(this.selectors.productThumbs).slick('slickGoTo', slideIndex, true);
    },

    _switchImage: function(imageId) {
      var $newImage = $(
        this.selectors.productImageWraps + "[data-image-id='" + imageId + "']",
        this.$container
      );
      var $otherImages = $(
        this.selectors.productImageWraps +
          ":not([data-image-id='" +
          imageId +
          "'])",
        this.$container
      );

      $newImage.removeClass(this.classes.hidden);
      $otherImages.addClass(this.classes.hidden);
    },

    _handleImageFocus: function(evt) {
      if (evt.keyCode !== slate.utils.keyboardKeys.ENTER) return;

      $(this.selectors.productFeaturedImage + ':visible').focus();
    },

    _initThumbnailSlider: function() {
      var options = {
        slidesToShow: 4,
        slidesToScroll: 3,
        infinite: false,
        prevArrow: '.thumbnails-slider__prev--' + this.settings.sectionId,
        nextArrow: '.thumbnails-slider__next--' + this.settings.sectionId,
        responsive: [
          {
            breakpoint: 321,
            settings: {
              slidesToShow: 3
            }
          }
        ]
      };

      $(this.selectors.productThumbs).slick(options);

      // Accessibility concerns not yet fixed in Slick Slider
      $(this.selectors.productThumbsWrapper, this.$container)
        .find('.slick-list')
        .removeAttr('aria-live');
      $(this.selectors.productThumbsWrapper, this.$container)
        .find('.slick-disabled')
        .removeAttr('aria-disabled');

      this.settings.sliderActive = true;
    },

    _destroyThumbnailSlider: function() {
      $(this.selectors.productThumbs).slick('unslick');
      this.settings.sliderActive = false;

      // Accessibility concerns not yet fixed in Slick Slider
      $(this.selectors.productThumbsWrapper, this.$container)
        .find('[tabindex="-1"]')
        .removeAttr('tabindex');
    },

Может быть, кто-то сталкивался с такой проблемой или может подсказать, в какую сторону двигаться?