Как сверстать кнопки слайдера выходящие за пределы контейнера?

Question

[arzamas-nick]

Как сверстать кнопки слайдера выходящие за пределы контейнера ?

Ширина контейнера 1170px, и кнопки слайдера выходят за пределы этой ширины, как быть если у пользователя ширина экрана как раз 1170px ? (тогда ведь кнопки просто будут не доступны).

Answer 1

[WapSter]

Создай брекпоинт примерно 1230пх и засунь их внутрь контейнера.

Comments

[arzamas-nick]

Не совсем понял.

[WapSter]

arzamas-nick, что тут понимать то

@media (max-width: 1230px) {
    кнопка левая {
        position: absolute;
        left: 30px;
    }
    кнопка правая {
        position: absolute;
        right: 30px;
    }
}

[arzamas-nick]

Тимур Турсунбаев, теперь кнопки наезжают на картинки в слайдере

[WapSter]

arzamas-nick, ну так и должно быть, а как ты хотел это же адаптация. Либо делай меньше слайдер.

[arzamas-nick]

Тимур Турсунбаев, да слайдер уменьил

Answer 2

[Адель Халитов]

<div class="parent">
      <div class="prev"> < </div>
</div>

<style>
.parent {
     position relative
}
nav {
    position absolute
    left -50px;
}
</style>

И контейнер не равен ширине экрана, если это конечно не сетка бустрап.
НА мобильной версии media сделайте, не знаю нужно ли на мобильной версии эти стрелки, наверное лучше скролить их пальцем.

Comments

[arzamas-nick]

Я так и делал. Но если экран станет 1170px кнопки исчезнут.

[Адель Халитов]

arzamas-nick, Это сетка бутстрап? Она не исчезает, а просто уходит за рамки экрана.
Медиа запросами так или иначе придется верстку корректировать.

@media (max-width: 600px) {
  nav {
    left 5px;
  }
}

[arzamas-nick]

Адель Халитов, Да она видима. Я убрал вместо left -45px сделал + и теперь кнопка наезжает на картинки =(

[Адель Халитов]

arzamas-nick, как вы хотите чтобы это выглядело на мобильной версии в пеинте нарисуйте.

[arzamas-nick]

Адель Халитов, размер слайда уменьшил

[Адель Халитов]

arzamas-nick,

<div class="parent">
      <div class="prev"> < </div>
</div>

<style>
@media (max-width: 600px) {
.parent {
     position relative
     width: 80%;
}
.prev {
    position absolute
    left -50px;
}
}
</style>

[arzamas-nick]

Адель Халитов, точно я про проценты забыл. Но проект уже сдал.

Answer 3

[profesor08]

Отрицательные значения для left, right спасут твое положение:

<div class="slider">
  <div class="button button-left"></div>
  <div class="button button-right"></div>
</div>

.slider .button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.slider .button-right {
  right: -30px;
}

.slider .button-left {
  left: -30px;
}

Comments

[arzamas-nick]

Я так и делал. Но если экран станет 1170px кнопки исчезнут.

[profesor08]

Ну так уменьши ширину слайдера. Либо при ширине 1170 размещай их внутри, задав положительное значение. Твоя ситуация не понятна, воспроизведи проблему на jsfiddle.

[arzamas-nick]

profesor08, уменьшил слайд