Как отсчитать расстояние в dots slick slider?

Question

[natoje-zlo]

В общем
есть слайдер, на всю ширину страницы, далее идет контейнер с контентом ( 1000px margin:0 auto)
в слайдере есть навигация (dots точки), ее нужно расположить по правому краю - по ширине контейнера
ее нужно расположить поверх картинки слайдера, навигация выводится за слайдером, если смотреть в инспектор
если сделать margin-top:-150px напр, то картинка перекрывает навигацию, z-index не помогает почему то никак

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

надеюсь понятно опи сал проблему

как решить?

Comments

[Юрий]

Ширина контейнера известна, ширина экрана – 100vw при любом разрешении. Через calc можно посчитать нужное положение для вашей пагинации.

[natoje-zlo]

Юрий,
вот смотрите
https://codepen.io/natojezlo/pen/poRKPga

как сделать так, что бы .slick-dots располагались по правому краю на уровне контейнера с текстом, но поверх изображения слайдера, напр. на 50px от низу?

вот о чем я

[secretsergey]

natoje-zlo, Добавить \ изменить:

.slick-dots{
        width: 700px;
        max-width: 100%;
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%, 0);
}

И контейнер у Вас 740px, а не 700. С padding`ами разберитесь :)

Answer 1

[Юрий]

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

Comments

[natoje-zlo]

не то пально
это если контейнер имеет жесткую ширину
а у меня он имеет max width
то есть
он может быть как максимальной шириной 700, так и меньше, т.е резина

[Юрий]

natoje-zlo, ну так добавьте медиа-запрос, и для экранов меньше 700 шириной делайте пагинации right: 0.

[natoje-zlo]

Юрий, Спасибо, наверное так и сделаю