Сергей delphinpro

Проблема не в слайдере.
Проблема в подвале.

На будущее:
Открывайте сайт в devtools и по очереди удаляйте все блоки. Когда удалите все проблемные, то сайт станет нормально выглядеть.
Например, сейчас у вас, если удалить подвал, то все становится нормально.

PS Еще на будущее. Отлаживайте блоки по одному. То есть отключаете всё, кроме того, с которым сейчас работаете, так, чтобы он остался единственным на странице. Отлаживаете его на всех размерах. Теперь вы будете в нем уверены, что все правильно.

Инициализировать слайдер по событию переключения на таб.
Слик определяет размеры слайдов при инициализации. Размеры скрытых элементов нулевые.

Посмотрите документацию https://github.com/kenwheeler/slick/#methods
Есть методы для удаления/добавления/фильтрации слайдов.
Вам, в принципе, подойдут slickFilter/slickUnfilter
Просто добавьте слайдам какой-то признак принадлежности к определенной категории. Например класс.

Если есть обрезка по одной стороне, то по второй может быть только обрезка или скролл. Visible может быть только по всем четырем сторонам.

В такой ситуации можно генерировать выпадающий блок вне слайдера и позиционировать скриптом в нужном месте.

Убрать всю эту фигню в js со стилями.
Всем слайдам идущим после активного задать трансформацию (scale < 1) и переходы.
Активному (первому из активных, т.к. активных там вероятно будет два) - транcформацию scale = 1
Всё это можно в css прописать, без использования событий слайдера.

Вот, проиллюстрировал основную идею: https://codepen.io/delphinpro/pen/ExgRENX

Потому что вы не сделали того, что вам посоветовали =)
Вот и не получается

https://jsfiddle.net/DelphinPRO/7tkLwg50/1/

Зачем смешивать две экосистемы?
Поищите слайдер на vue. Или хотя бы ванильный.

По вопросу:

в mounted вешайте слушателя matchMedia на нужный диапазон и в нем инициализируйте/деактивируйте слик.

кроме того можно использовать встроенную функциональность. Обратите внимание на этот пример — в диапазоне 0..300 слайдер выключается.

.link -> onclick -> $('slider').slick('slickGoTo', indexSlide)
https://github.com/kenwheeler/slick/#methods

Переключить в вертикальный режим
Отображать семь слайдов
Стилизовать эти слайды свойствами opacity и transform3d

Читаем документацию, видим, что nextArrow может принимать string (html | jQuery selector) | object (DOM node | jQuery object)
Чуть-чуть думаем, и понимаем, что мы можем передать сюда любой jquery-объект со страницы. Осталось только выбрать нужный.
Кнопочки обычно недалеко от слайдера, значит их легко найти через общего родителя.
Ну и всё. Осталось только наговнокодить.
Примерно так:

$('[data-carousel]').each((index, el) => {
  const $carousel = $(el);
  let what        = $carousel.data('carousel');

  if (!carouselConfig.hasOwnProperty(what)) return;

  let $arrows = $carousel.parents('.carousel-wrapper').find('.arrows').children();

  $carousel.slick({
    arrows   : true,
    infinite : true,
    prevArrow: $arrows.filter('.arrows__prev'),
    nextArrow: $arrows.filter('.arrows__next'),
    ...carouselConfig[what],
  });
});

Так же как и с другими картинками

.slick-slide img {
  display: block;
  width: 100%;
  /* or */
  max-width: 100%;
}

codepen.io/delphinpro/pen/EWpovE
Ранее я советовал в подобном вопросе такой вариант - codepen.io/delphinpro/pen/XMBVeV
Выбирайте любой