Виктор

:before и :afterдобавляет контент к содержимому элемента, а у img его нет.
Решение тут одно завернуть img например в div и к нему уже применять псевдоэлементы.

$.each($(' .number-all'), function (index, value) { 
  	var id = $(value).text(),
        $this = $(this);
    
	$.ajax({
	    type: "POST",
	    dataType: "json",
	    url: "https://api.novaposhta.ua/v2.0/json/",
	    data: JSON.stringify({
	        "modelName": "TrackingDocument",
	        "calledMethod": "getStatusDocuments",
	        "methodProperties": {
	            "Documents": [
	                {
	                    "DocumentNumber": id,
	                    "Phone": ""
	                }]
	        },
	        "apiKey": "caeb13b660b11432a9843510578b909a"
	    }),
	    success: function(response) {
	        var data = response.data;
	        data.forEach(function(item, i, arr) {
	            $this.append(item.Status);
	        });
	    },
	})
  console.log($(value).text()); 
});

Запоминать номер слайдера при прокрутке, при обратной прокрутке ставить активный слайд (slickGoTo) в slick этот номер.

Вероятнее всего стили из файла temaplate.css подключаются раньше чем те, что перекрывают. Тут либо увеличить вес селектора, либо поменять последовательность подключения стилей.

На событие, которое убирает display: none повесить реинициализацию.
.slick('unslick').slick(options);

Если можешь изменить структуры и не хочешь делать слайды не absolute, то можешь переместить кнопки в первый слайд https://codepen.io/anon/pen/GGxPyK, но нужно понимать возможные проблемы из-за этого.
Второй вариант на js высчитывать высоту родителя по высоте слайдов.

$(document).ready(function(){
    $('.spoiler_links').trigger("click");
});

https://jsfiddle.net/15djkb3h/