CSS -无法逃离溢出隐藏的swiperjs容器

我有一个滑块使用swiperjs，我想添加下拉菜单的滑动器。默认情况下，所有的滑动容器都是相对位置的，所以我将它们全部更改为静态位置，但是下拉菜单不能转义到根容器(相对位置)。

下面是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,
});

您可以强制在.swiper-container元素上显示溢出内容:

.swiper-container {
overflow: visible !important;
}

但是，这个覆盖有可能会干扰插件的样式/视觉效果。

参见概念验证示例:

const swiper = new Swiper(".myswiper",{
speed:1000,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 'auto',
initialSlide:0,
loop:true,
loopedSlides:10,
visibilityFullFit: true,
autoResize: false,
spaceBetween: 0,
});

.swiper-container > .swiper-wrapper > .swiper-slide{
width:200px;
}
.swiper-container {
overflow: visible !important;
}

<!DOCTYPE html>
<head>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<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>
</body>

UPDATE:我发现了一个不用改变overflow或html流就能解决这个问题的技巧。关键是我需要改变滑动容器的高度，每当我悬停包含下拉菜单的幻灯片，并在将光标移出幻灯片时切换回原始高度。要做到这一点，我需要设置刷容器pointer-events: none和下拉pointer-events: auto。然后设置鼠标悬停时的高度

工作代码:https://jsfiddle.net/4nw05vyh/

const swiper = new Swiper(".myswiper",{
speed:1000,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 'auto',
initialSlide:0,
loop:true,
loopedSlides:3,
visibilityFullFit: true,
autoResize: false,
spaceBetween: 0,
});

:root{
--swiper-navigation-size:20px !important;
}
.slider-section{
top:50px;
position:relative;
width:400px;
height:50px;
margin:auto;
}
.swiper-container{
width:90%;
height:100%;
pointer-events:none;
background-color:lightgray;
}
.swiper-container:hover{
height:300px;
}
.dropdown{
pointer-events:auto;
}
.swiper-container > .swiper-wrapper > .swiper-slide{
width:100px;
margin-left:30px;
margin-top:10px;
}

<!DOCTYPE html>
<head>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="slider-section">
<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>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</body>

相关内容

最新更新

热门标签：