Jump to content

Как отобразить блок, который пропадает из-за 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;
}

 

Живой пример

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    46,950
    Total Members
    1,451
    Most Online
    surenos
    Newest Member
    surenos
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • День добрый! Набиваю руку в простенькой верстке придуманного мной сайта. Возникла проблема из за которой рву на себе волосы уже 2е сутки - это выравнивание пункта текста с добавленной картинкой вместо привычных точек. Перепробовал уже все,с list-style-image вообще сделать что либо бесполезно. Перешел на изменения в самом <li>, текст просто накладывается на картинку и сделать ничего не получается. Размер картинки 64x64. Поиски в интернете успехом не увенчались.  Ниже мой сырой код по этому вопросу: li { list-style-type: none; } li:before{ content: url("http://s1.iconbird.com/ico/2013/9/447/w128h12813804433922.png"); width: 30px; height: 30px; display: grid; margin-top: 2%; } Должно получится как на картинке:  
    • Привет. Думаю про SVG верный путь. Что же касается тех части то, возможно, вот это поможет: Collection of Beautiful SVG Animations on Codepen
    • Новые промо коды на октябрь Действительны с 1 по 31 октября Румыния Выделенный Сервер Скидка 5%: RO5%ANN при аренде на год Скидка 10% код:OCT2020RO при арене на каждый месяц Нидерланды Выделенный Сервер Скидка 5% код: NL20OCT при аренде на год VPS  Скидка 15% код:OCT20VPS при арене на каждый месяц Скидка 20% код:VPS20OCT при арене на каждый квартал Скидка 25% код:SEMI2020 при аренде на полгода Скидка 30% код:ANN2020OCT при арене на год SSD Hosting Скидка 15% код:OCT20 при арене на каждый месяц Скидка 20% код:OCT2020 при арене на каждый квартал Скидка 25% код:SEMI25OCT при аренде на полгода Скидка 30% код:ANN30OCT при арене на год  
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...