CSS

Question

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

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

Answer 1

您可以强制溢出的内容在 .swiper-container 元素上可见：

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

但是，此覆盖可能会干扰插件的 styling/visuals。

查看概念验证示例：

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>

Answer 2

更新： 我发现了一个无需改变溢出或 html 流程即可解决问题的技巧。关键是每当我悬停包含下拉菜单的幻灯片时，我都需要更改 swiper-container 的高度，并在将光标移出幻灯片时切换回原始高度。为此，我需要设置 swiper-container pointer-events: none 和下拉列表 pointer-events: auto。然后设置悬停时swiper-container的高度。

工作代码：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>

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

CSS - unable to escape overflow-hidden container of swiperjs

hidden

escaping

overflow

swiperjs