Виталий Першин

После открытия вкладки необходимо сделать сброс для слайдера. Как-то так:

if (contentBlockYacht) {
    $('.slider-yacht-02, .slider-yacht-nav-2').slick('setPosition');
    contentBlockYacht.classList.add("open-yacht-active");
}

Попробуйте так https://github.com/get-web/so-widgets-bundle/blob/...

Ширина слайда рассчитывается исходя из свободного пространства деленного на кол-во показываемых слайдов, если хотите использовать плавающую ширину добавьте в инициализацию слайдера variableWidth: true

$('.carousel').slick({
    infinite: false,
    variableWidth: true,
    slidesToShow: 1,
    swipe: true,
  });

Примерно так:

Так:

Или так:

Как вариант:


Или с помощью js кастомные активные слайды задавать:

Чтобы слайдер нормально работал не надо переделывать слайды, надо внутри слайдов вставлять свои блоки и там их крутить как захочется. Но если уж очень надо навешать костылей, то в размере надо учитывать отступы:

.clients__box {
  outline: 1px solid red;
  margin: 0 40px;
  margin-bottom: 20px;
  width: calc(100% / 3 - 80px) !important;
}

После смены формата, нужно делать сброс:

Вынести их за пределы слайдов:

Как вариант удалять до инициализации слайдера:
https://jsfiddle.net/l2banners/9w5o2pnq/10/

Синхронизированные слайдеры, раздел Slider Syncing

Нужно после переключения таба надо делать сброс $(".slider-nav").slick('setPosition');

$(".slider").slick('setPosition');
и
$('.slider').slick('reinit');
еще можно удалить $('.slider').slick('unslick') и создать заново. Но лучше всего setPosition

Потому что окно изначально скрыто и слик рассчитал размеры равные 0, чтобы он нормально отображался в модалке, нужно после вызова модалки обновить позицию слайдера: $(".slider").slick('setPosition');

Обнулите padding у .developer-dots li button

.developer-dots li button {
	font-size: 0;
	line-height: 0;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: transparent;
	border: 3px solid #c4c4c4;
  padding: 0;
}

Используйте customPaging, есть похожий пример: