时间戳

首页 > 解决方案 > ngx-swiper 将弹出窗口隐藏在其中

javascript - ngx-swiper 将弹出窗口隐藏在其中

问题描述

stackblitz 的链接

上面是示例应用程序的链接，我试图显示滑动器内部的弹出窗口，所以我使用了溢出：可见但它扰乱了滑动器滑动。请让我知道我该如何解决

共有三张幻灯片，我一次显示一张幻灯片，然后 3、1 张幻灯片有一个弹出链接，单击链接它将打开弹出窗口，但由于该弹出链接位于滑动器内部，因此它隐藏在滑动器 div 中。溢出：可见，对我来说可以正确显示弹出链接，但它开始显示两张幻灯片

  .swiper.activeIndex{
    overflow: visible !important;
  }

以上代码导致其他幻灯片出现问题

标签： javascripthtmlcssangularswiper

解决方案

由于您添加了 swiper 类可见 !important 正在显示隐藏的 div 删除该代码并使用 transform:translate 移动您的工具提示

.popup .show {
    visibility: visible !important;
    -webkit-animation: fadeIn 1s;
    transform: translate(10px,4px);
    animation: fadeIn 1s;
}

您的分叉示例：https ://stackblitz.com/edit/swipper-pagination-vftiby

推荐阅读