nikki4

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

Recommended Posts

Есть слайдер. Чтобы скрыть слайды, у блока 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;
}

 

Живой пример

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,701
    Total Members
    3,128
    Most Online
    VovkaKrut
    Newest Member
    VovkaKrut
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.