Инициализируйте только 1 нужный слайдер а не все сразу. При выборе другой галлереи делайте дестрой старой и инит новой. Тогда у вас всегда будет только 1 активный слайдер и минимум перерендеринга. Что бы посмотреть какие элесенты у вас перерендываются можно включить в отлидчике хрома: https://css-tricks.com/browser-painting-and-consid...
Верхний слайдер можно вообще убрать, а стрелки сделать как триггеры.
Вы же сам наложили кнопки поверх сладйера и дали им 50% ширины, но зачем? Если вам не нужны кнопки то просто выключите их в опцияъ слайдера ну или же дайте display:none смысл от прозрачных кнопок, которые лежат поверх слайдера. Можно еще дать: .slick-arrow { height: 0; }
тогда в :before уже задать высоту кнопок.
Вы не особо понимаете для чего нужен absolute и как его использовать.
Что б выровнять абсолютный элемент по центру родителя:
top:50%;
left:50%;
transform:translate(-50%, -50%);