Какова причина такого поведения вертикальной slick карусели?

Question

[sadieff]

Ребят, хелп, не могу понять в чем причина. Дали мне верстку для работы, но не могу победить глюк: есть вертикальная карусель slick, у её айтемов есть id. Надо поймать хэш в адресной строке и перейти к соответствующему слайду.
Естественно я вытаскиваю хэш, нахожу индекс нужного блока до инициилизации карусели. А после инициилизации перехожу к слайду:

// находим index блока
	var services_id = false;
	if(location.hash.substring(1).length > 0) {
		if($('#'+location.hash.substring(1)).length > 0) services_id = $('#'+location.hash.substring(1)).index();		
	}
	
	// запускаем карусель
	
	// переходим к слайду
	if (services_id){	
		$('.service-slider').slick( 'slickGoTo', services_id );
	}

Но работает так: если ПЕРЕЙТИ по ссылке с hash карусель уходит куда-то вверх.

Если открытую страницу ОБНОВЛЯТЬ, то работает как надо.

Ссылка на страницу: удалено

Почему такое происходит? Как пофиксить?

Answer 1

[Евгения Чернова]

Сделай border у блока карусели и увидишь, что сама карусель стоит на месте.
Но стрелки стилями прижаты к низу блока карусели. Они и остаются там все время пока картинки перемещаются на верх.
Как вариант - пересчитывай индекс "первой" картинки таким образом, чтобы снизу всегда оставалось достаточное количество картинок, чтобы не было пустого места до низа блока карусели.

Comments

[sadieff]

Все верно, карусель стоит на месте. Но позиция расчитывается не верно https://yadi.sk/i/nlv2oYBNhEldwQ (там должно быть 0). Проблема в этом. Надо победить именно это.

[Евгения Чернова]

Но позиция расчитывается не верно (там должно быть 0). Проблема в этом. Надо победить именно это.

У slick-track это нормальное поведение. Он и при загрузке не на нулях стоит. Чтобы исправить эти цифры, нужно править код карусели.

Лучше уточни проблему без предположений что нужно править в коде карусели.
Изначально написано "карусель уходит куда-то вверх." (Карусель не уходит. )
Что именно не устраивает при прокрутке: пустое место внизу, обрезанная картинка на верху, что-то другое?

И учитывая количество уточнений, неси уже код в jsfiddle.

[sadieff]

Евгения Чернова, нет, у слик это не нормальное поведение. Проблема в том, что контейнер, который позиционируется, поднимается выше, чем должен. Решилось добавлением

.slick-track {
    position: absolute;
}

вместо position: relative;
Но пока не разобрался с причиной. Если разберусь - отпишусь.

[Евгения Чернова]

у слик это не нормальное поведение

Я имею в виду, что это поведение прописано в js самой карусели. Посмотрите в код как высчитывается его положение.
Просто я не считаю ненормальным исходный код, если он не соответствует тому, что мне требуется. Возможно, наше недопонимание из-за этого.

PS Мне ни разу не приходилось менять position ни в горизонтальных ни в вертикальных вариантах этой карусели. Все решалось настройками самой карусели, которые предоставляет разработчик.
Желаю успеха в настройке.