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

Если я правильно понял, то как-то так:

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

$('.popup__slider').slick({ // Подключение Slick Slider
         slidesToShow: 1,
         slidesToScroll: 1,
         arrows: false,
         fade: true,
         asNavFor: '.popup__slider_nav',
  responsive: [
    {
      breakpoint: 560,
      settings: {
        arrows: true
      }
    }
  ]
         });
      })

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

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

Работать будет только один набор переключателей, сколько бы вы их не добавили на страницу, поэтому нужно убрать все ваши переключатели из слайдов и оставить один общий.


Если же нужно обязательно в каждом слайде, тогда придется писать самостоятельно.

Проходим циклом по каждому блоку со слайдером, находим в нем нужные элементы и инициализируем:

slideGo нужно вынести за пределы $(document).ready(function() {

$(document).ready(function() {

let slider = $('.gallery__wrap');

slider.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: false,
      centerMode: true,
     centerPadding: '500px',
      arrows: true,
        appendArrows: $('.gallery__arrows'),
        prevArrow: '<button class="gallery__arrow gallery__arrow--dir_left"></div>',
        nextArrow: '<button class="gallery__arrow gallery__arrow--dir_right"></button>',
     dots: true,
     appendDots: $('.gallery__dots'),
      customPaging : function(slider, i) {
       return '0' + (i + 1);
       },
     dotsClass: 'gallery__dots-list',
     responsive: [

        {
          breakpoint: 1430,
          settings: {
            centerPadding: '200px',
          }
        },
        {
          breakpoint: 960,
          settings: {
            centerPadding: '100px',
          }
        },
        {
          breakpoint: 780,
          settings: {
            centerPadding: '0px',
            centerMode: false,
          }
        }
      ]
    });




});

function slideGo(dir) {
  let slider = $('.gallery__wrap');
  if(dir === "+") {
    slider.slick('slickNext');
  } else if ( dir === "-" ) {
   slider.slick('slickPrev');
  }
 }

Не совсем понял в чем именно проблема. Сделал вот такой вариант, остальное можно стилями подогнать как надо:

Либо убрать centerMode или поставить ему false

Либо добавить centerPadding: '0px',

focusOnSelect: true

Поместите каждый слайд в пустой div а у же внутри него вставляйте свои блоки slick-child_flex
Помимо этого необходимо ограничить .wrapper-content по ширине так как flex-basis: 75% позволяет тянуть блок на сколько угодно и ваши слайды его благополучно растягивают как хотят. Как минимум такому флекс элементу нужно задать размер min-width: 0;

не надо трогать родные блоки slick. Свои кастомные блоки вставляйте внутрь пустого div

<div class="slider">
    <div>
        <!-- А тут свой блок -->
    </div>
    <div>
        <!-- А тут свой блок -->
    </div>
</div>

В slick к этому нужно подходить иначе. Каждый слайд плотно прижат друг к другу и мы их не трогаем, мы управляем содержимым слайдов, то есть непосредственно нашими блоками. Тут нужно понимать как работают сетки по типу bootstrap и как пользоваться отрицательными отступами. Предположим нам необходимо сделать отступы 20px, это по 10 пикселей слева и справа от нашего блока то есть width: calc(100% - 20px); margin: 0 10px;
Блоку в котором находится слайдер мы задаем overflow: hidden; , а самому слайдеру мы задаем отрицательные отступы в те же 10 пикселей margin: 0 -10px
Похожий пример, который я делал ранее:

Каждый слайд сделайте пустым дивом без стилей и в него свои блоки вставляйте, обычно проблема в этом. Так же если ваш слайдер находится внутри флекс контейнера, то он может разъезжаться насколько захочет, если его явно не ограничить в размерах. а в остальном вам правильно сказали залейте пример в песочницу, тут не битва экстрасенсов.

Каждый салайд сделайте пустым дивом без стилей и в него свою карточку вставляйте, а уже её позиционируйте как хотите внутри дефолтного слайда

Сделал пример, можно доработать под себя или разобраться как работает и сделать по своему.
Я правда не понял какое вам нужно направление слайдов поэтому оставил горизонтальную: