Как отобразить блок, который пропадает из-за overflow?

[nikki4]

Есть слайдер. Чтобы скрыть слайды, у блока lsbslider стоит overflow: hidden;

У слайдера есть стрелки навигации. - .left

хочу сместить стрелку левее от блока.  т.е. чтобы стрелка была вот так:

http://joxi.ru/BA0KBq0HMlxJq2

Вопрос как сделать ,чтобы она не пропадала. Сейчас стрелку не видно, так как у блока выше overflow:hidden

 

<div class="lsbslider">
<a class="left" href="#" role="button"></a>
</div>

.lsbslider {width: 300px;
position: fixed;
left: 100px;
height: 200px;
  background:coral;
  overflow: hidden;
}

.left {
     left:-30px;
}
.left {
    position: absolute;
    display: flex;
    width: 30px;
    height: 50px;
    background: black;
}

 

Живой пример

[Vlad_P]

Сложно понять, какой слайдер вы используете, но можно сразу сказать 2 способа:

1. задать этому блоку padding, чтобы контент на него не заходил. и не выносить стрелки за пределы блока

2. сделать кнопки отдельными элементами и через js навесить на них переходы вперед и назад. Любой готовый скрипт слайдера позволяет это без проблем