Как вынести кнопки за предел swiper?

Question

[rootnoroot]

В общем есть карусель, контейнеру свипера стоит overflow hidden;

.swiper, swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;
}

пытался дать по оси Y visible
что то не то пальто, нифига не работает
а просто с position absolute их режет overflow hidden

.swiper{
   overflow:visible;
   overflow-x:hidden!important;
   overflow-y:visible!important;
}

Мне нужно кнопки (swiper-button-next, swiper-button-prev) вынести вверх за пределы слайдера
Если их поставить выше блока swiper, то они не работают

как их вынести и дать понять что они от этого слйдера?

Answer 1

[Danny Arty]

Оберните слайдер в еще один контейнер и укажите кнопки там, условно такая разметка

<div class="slider-wrapper">
   <div class="swiper">
      <div class="swiper-wrapper">
         <div class="swiper-slide">Slide 1</div>
         <div class="swiper-slide">Slide 2</div>
         <div class="swiper-slide">Slide 3</div>
       </div> 
    </div>
    <!-- Кнопки -->
    <div class="myslider-prev swiper-button-prev"></div>
    <div class="myslider-next swiper-button-next"></div>
</div>

И в js укажите так

var swiper = new Swiper('.swiper', {
  ...тут ваши прочие параметры
  navigation: {
    nextEl: '.myslider-next',
    prevEl: '.myslider-prev',
  },
});

Comments

[rootnoroot]

Спасибо большое