I have a slider that utilizes swiperjs and I want to incorporate a dropdown menu within each swiper-slide. However, I've encountered an issue where the dropdown menu is unable to escape the root container due to the positioning constraints.
For a demonstration, you can view the example on jsfiddle: https://jsfiddle.net/7uas82rz/20/
HTML
<div class="freedom my-5">
<div class="swiper-container myswiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>SLIDE 1</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu 1</a></li>
<li><a class="dropdown-item" href="#">Menu 2</a></li>
</ul>
</div>
</div>
<div class="swiper-slide">
<span>SLIDE 2</span>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
CSS
.freedom{
position:relative;
}
.swiper-container, .swiper-wrapper, .swiper-slide{
position:static !important;
}
.swiper-container > .swiper-wrapper > .swiper-slide{
width:200px;
}
Javascript
const swiper = new Swiper(".myswiper",{
speed:1000,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 'auto',
initialSlide:0,
loop:true,
loopedSlides:20,
visibilityFullFit: true,
autoResize: false,
spaceBetween: 0,
});