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

Набросал свой вариант:

Это есть прямо в документации Slider Syncing называется

Как вариант накидал на скорую руку:

Подписываемся на события слайдера и выполняем необходимые действия в нужный момент:

$('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        if(slick.slideCount == nextSlide + 1) {
            // code...
        }
    });

Желательно заливать полноценные рабочие примеры, тогда можно было не только посмотреть, но и поправить.
Вы скорее всего навешали стилей на portfolio__card, но вы не учил того, что каждый слайд в слик слайдере имеет свои свойства, в том числе, для правильно работы он обнуляет margin. Правильнее всего добавлять обертку для каждого слайда, а уже внутри делать свои блоки как хотите:

<div class="container">
	<div class="card-slider">
		<div>
			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt1.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
		<div>
			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt2.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
		<div>

			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt3.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
	</div>
</div>

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

У вас инициализация слайдера идет очень поздно, а картинка у вас принимает высоту контейнера в котором находиться, таким образом её распирает на пол экрана. А когда у вас подключается слайдер, в нем появляются классы на которые завязан ваш ксс:

.slick-slide img {
    margin-top: 25px;
    width: 80%;
    display: block;
    padding-left: 70px;
}

Это неправильный подход. Пока не подключиться слайдер, не подключаться и ваши стили.. Вы либо пропишите стиль на саму картинку либо привяжитесь к чему-то статическому, хотя бы к контейнеру слайдера классу slider на который вы привязали слик. А вообще почитайте про БЭМ и таких проблем у вас никогда не будет.