Думаю потому что принято не компилируемые файлы со стилями начинать от "_".
Если вы импортируете файл, который будет позже скомпилирован вы поличите дублирование стилей 2 раза (1 раз в отдельной файле и 1 раз в файле в который вы импортируете).
Думаю вы не указали тут явно название и расширение фала, поэтому он и кричит (выше у вас есть .scss).
Инициализируйте только 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%);
