0xD34F

const $slider1 = $('.slider-nav').slick({
  ...
}).on('beforeChange', function(e, slick, currSlide, nextSlide) {
  $slider2.slick('slickGoTo', nextSlide + 1);
});

const $slider2 = $('.slider-for').slick({
  ...
}).on('beforeChange', function(e, slick, currSlide, nextSlide) {
  $slider1.slick('slickGoTo', nextSlide - 1);
});

:asNavFor="$refs.miniPreview"

$refs заполняются только после того, как компонент был отрисован, и они не реактивны. Это подразумевается только как обходной путь для прямого манипулирования потомками — вам следует избегать доступа к $refs из шаблонов или вычисляемых свойств.

mounted() {
  this.$nextTick(this.$forceUpdate);
},

<div class="slider">

$('.slick').slick({

data-category="orange"

var filterClass = $(this).data('category');

$('.slick').slick('slickFilter', filterClass);

$('.category__menu').on('click', 'li', function() {
  $('.slider').slick('slickUnfilter');

  const category = $(this).data('category');
  if (category !== 'allPost') {
    $('.slider').slick('slickFilter', `.${category}`);
  }
});

.on('beforeChange', function(e, slick, currSlide, nextSlide) {
  $('.tabs-content__item').hide().eq(nextSlide).fadeIn();
});

$('селектор контейнеров пар слайдеров').each(function() {
  $('.slider-for', this).slick({
    ...
    asNavFor: $('.slider-nav', this),
  });

  $('.slider-nav', this).slick({
    ...
    asNavFor: $('.slider-for', this),
  });
});

.on('beforeChange', function(e, { slideCount: c }, curr, next) {
  const selector = shift => `[data-slick-index="${next + shift * c}"] .slide`;

  $('.slide.color', this).removeClass('color');
  $([ 0, 1, -1 ].map(selector).join(', '), this).addClass('color');
})

.slider::before,
.slider::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 666;
}

.slider::before {
  left: 0;
  content: attr(data-prev);
}

.slider::after {
  right: 0;
  content: attr(data-next);
}

$sliderElement.on('init afterChange', function(e, { $slider }) {
  const $active = $slider.find('.slick-active');

  $slider.attr({
    'data-prev': `prev: ${$active.prev().text() || 'какой-то дефолтный текст'}`,
    'data-next': `next: ${$active.next().text() || 'какой-то дефолтный текст'}`,
  });
})

let slider = -1;

setInterval(() => {
  slider = (slider + 1) % $sliders.length;
  $sliders.eq(slider).slick('slickNext');
}, 1000);

.slick-dots li > button {
  width: 8px;
  height: 8px;
}

.slick-dots li.slick-active > button {
  width: 20px;
  height: 20px;
}

.slick-dots li.slick-active + li > button {
  width: 14px;
  height: 14px;
}

.slick-dots {
  li button {
    background-color: red;
  }

  li.slick-active ~ li button {
    background-color: blue;
  }
}

$('.slider3')
  .slick('slickUnfilter')
  .slick('slickFilter', $(`.${$(this).data('goods')}`).closest('.slick-slide'));

const index = $(this).closest('.catalog-wrap__item').index();

$('.popup-link').magnificPopup({
  midClick: true,
  type: 'inline',
  callbacks: {
    open() {
      const $slider = $('.slider');

      if (!$slider.hasClass('slick-initialized')) {
        $slider.slick({
          infinite: true,
          slidesToShow: 1,
          dots: true,
        });
      }

      $slider.slick('slickGoTo', +$(this).attr('index'));
    },
  },
});