Слайдер во всю ширину страницы?

Question

[nanny_ogg]

Несколько раз уже встречалась с задачей - сделать слайдер на всю ширину страницы, но чтобы навигация была не по краям самого изображения, а по краям области контента.
То есть есть у меня, например, контент, у него ширина 1170px, а ширина экрана 1600px. Ширина изображения слайдера будет 1600px, но стрелки навигации нужны по краям границы в 1170px.
Есть ли готовое решение такого слайдера? Или подскажите, в какую сторону тут думать

Comments

[Дмитрий]

Как вариант для родителя навигации задать ширину контента

[Сергей delphinpro]

Второй вариант

.arrow-left {
  position: absolute;
  right 50%;
  margin-right: ($container-width / 2);
}

[Ankhena]

И в чем сложность из 50% вычесть половину от 1170 (или с коррекций на отступы) для левой стрелки и прибавить для правой?

Answer 1

[Томас Андерсон]

Попробуй idangero.us/swiper очень гибкий инструмент. Как вариант, сделать слайдер во всю ширину, внутри него открыть контейнер и добавить в него навигацию, а там дальше позиционирование в контексте контейнера.

Comments

[nanny_ogg]

Спасибо огромное, именно то, что искала

Answer 2

[Anton Mashletov]

Вот в эту. В интернете, просто тонна готовых слайдеров: и со стрелочками в контенте, и вертикальные, и горизонтальные, и в позе 69 — буквально на первых страницах гугла.

Comments

[nanny_ogg]

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