Jump to content
  • 0

slider overflow hidden position absolute


npofopr
 Share

Question

Собственно, я думаю, многие встречались с такой проблемой, как вытаскивание блока с position: absolute; за блок с overflow:hidden;

В моем случае, это внутри слайдер http://jsfiddle.net/npofopr/F22FQ/

 

Собственно при ховере на блок, должен всплывать доп. контент, из-за overflow: hidden; все режется.

Как обойти? Нагуглить не получилось, вернее ничего не подошло (такое  пробовал http://dabblet.com/gist/7729560 тоже), а как решить с помощью js, пока не нашел.

 

В общем, может у кого есть в закладках, пути решения? Буду рад всему  :)

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

А почему ты выбрал fredsel, а не бхслайдер - чем он лучше?

Получается только джаваскрипт, оверфлоу никак не отменить, иначе все содержимое слайдера вывалится

Js можно решать оп-разному. Например у тебя в хтмл прописана подсказка в скрытом теге прямо в слайде. Ты берешь ее данные и генерируешь новый слой, который является ребенком body и позиционируется фиксированном относительно курсора мышки или места в слайдере.

Edited by Zverushka
Link to comment
Share on other sites

  • 0
А почему ты выбрал fredsel, а не бхслайдер - чем он лучше?
Ну мне кажется он более "расширяемый" что ли. Хотя тут кому что нравится. бхслайдером я почти никогда не пользовался. А у fredel есть большая база готовых слайдеров, что иногда очень выручает. Но в принципе тут без разницы, кругом используется overflow:hidden.

 

Js можно решать оп-разному.
Это я понимаю, просто с js у меня совсем никак, вот и думал, может есть где "своровать" или подсмотреть. 

+ возможно будет сложность с тем, что сайт адаптивный, т.е. позиция этого нового слоя может легко меняться от одного поворота планшета

Link to comment
Share on other sites

  • 0
т.е. позиция этого нового слоя может легко меняться от одного поворота планшета

Надо значит обрабатывать onresize и вычислять заново позицию и направление подсказки. Это будет несложно, если алгоритм позиционирования будет вынесен в отдельную функцию calc()

jquery придется подучить, деваться некуда...  нужно использоать offset(), clone(), text(), append(), .addClass, remove() возможно еще какие-то функции.

Edited by Zverushka
Link to comment
Share on other sites

  • 0

В том же бхслайдере - на каждый ресайз пересчитывает слайдер. Он адаптивный по умолчанию.

Дак а тут также вроде. А разве есть такие слайдеры, которые пересчитывают каждый раз слайдер?) 

И адаптивность это же привилегия стилей.

 

bxslider попроще будет, по моднее что ли, но мне кажется и менее опционален (понятно конечно, что все руками можно легко дописать).. Да и библиотека раза в 3 меньше весит. Для меня тут все равно. Сменить одно на другое не проблема.

 

Да и суть вопроса, не в слайдере, а в overflow: hidden, а оно во всех слайдерах)

Вот тут реализовано, почти то, что мне надо. Но тут это обычные тултипы (если правильно понял), с ними проще будет. Они там сами вне блока "рисуются".

Link to comment
Share on other sites

  • 0
А разве есть такие слайдеры, которые пересчитывают каждый раз слайдер

Простенькие не адаптивны.  Просто viewport слайдера четко определен и завязан на размере каждого слайдера, если окно уменьшается - нужно всю систему пересчитывать. 

Link to comment
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
Answer this question...

×   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.

 Share

  • Similar Content

    • By Алеся
      Ребята, без вас никуда!
      Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide.
      Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css - не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства?
       
      На сайте splide такая инфа по адаптиву. https://splidejs.com/guides/options/#breakpoints
       
      Вот типа того что-то пробую...
      https://jsfiddle.net/aqmuyhwd/
       
              
       
    • By Алеся
      Ребят, подскажите, в чем может быть ошибка. На странице два слайдера от splide. Один с классом splide (работающий), другой c классом splid (не работает). Выглядит так, будто не работают стили. Отображается как не маркированный список текста и картинок. Стили добавила единожды:
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/css/splide.min.css" integrity="sha256-EqzwzekQXKNbB5EE4nNBQT+2gWQIWRZQXAd89YdIq8M=" crossorigin="anonymous"> Который не работает:         Заранее спасибо!!
      <div class="foo_columns">       <div class="splid">         <div class="splid__track">           <ul class="splid__list">           <li class="splid__slid">         @@include('./partials/footer/_footer.html', {           "caption": "Знакомства", "downPicturePath": "img/foo1.png", "text": "Отношения актеров в кино и реальной жизни"         })       </li>       <li class="splid__slid">         @@include('./partials/footer/_footer.html', {           "caption": "Знакомства", "downPicturePath": "img/foo2.png", "text": "Отношения актеров в кино и реальной жизни"         })       </li>       <li class="splid__slid">         @@include('./partials/footer/_footer.html', {           "caption": "Знакомства", "downPicturePath": "img/foo3.png", "text": "Отношения актеров в кино и реальной жизни"         })       </li>       <li class="splid__slid">         @@include('./partials/footer/_footer.html', {           "caption": "Приколы", "downPicturePath": "img/foo4.png", "text": "Отношения актеров в кино и реальной жизни"         })       </li>       <li class="splid__slid">         @@include('./partials/footer/_footer.html', {           "caption": "Авто", "downPicturePath": "img/foo5.png", "text": "Отношения актеров в кино и реальной жизни"         })       </li>     </ul>   </div> </div>       <div class="foo__line"></div>        <script>         new Splid( '.splid', {           type   : 'loop',           perPage: 1,           speed: 2000,           autoplay: true,           interval: '3000',           arrows: true,         } ).mount();       </script>     </div>  
    • By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By maxfloyd
      Всем привет. У меня возникла проблема, я не могу поместить прозрачное меню navbar на слайдер bootstrap 4.
      Получается, что меню вверху, а под ним слайдер(
      HTML:
      CSS:

      Вопрос решил. Слайдер нельзя помещать в хедер. Добавить свойства
      header {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
      }
    • By four17
      Всем привет, как можно реализовать такой слайдер на платформе wordpress.
      скриншот, и ссылка на источник http://www.futsaldynamo.com/ .

      Функционал слайдера таков:  выводит 4 поста сбоку (которые мы укажем в админке ,)  и главный  большой блок слайдера это картинка  и контент текущего слайда ?
      Спасибо за внимание и помощь , благодарен любому совету.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy