Html “外部的显示元素”；溢出：隐藏"；内置滑杆

问题

我有一个swiper滑块：（例如，通过给

.product info wrapper

一个大约100px的固定高度来重新创建问题）

在幻灯片中，有一个图像和一个信息框，最初看起来像这样：

当我单击“Kurzinfo”时，框需要展开，最后看起来是这样的（swiper container在新徽章之后结束，因此它必须流过swiper container）：

问题是，

.swiper容器

有一个

溢出：隐藏属性，隐藏继续到右侧的幻灯片

我试过什么？

1） 我尝试过更改
溢出：隐藏.swiper容器上的code>到
溢出-x：隐藏试图隐藏流向右侧的幻灯片，但显示向下溢出的内容。这导致
.swiper container
只需添加一个滚动条，您可以向下滚动查看应该溢出的内容

2） 我尝试过改变
位置：绝对
在
.product info wrapper
上（包装盒子和徽章）到
位置：固定
，因为我读到溢出属性被
位置忽略：fixed。然而，这似乎并不能解决问题

我还没有尝试过任何其他方法，只是因为我不知道任何其他解决方法

片段

我在这里粘贴了这个片段，但它不起作用，因为我使用了SCS，不幸的是没有时间将其重写为纯CSS。但是，如果上面的链接消失，可以复制到codepen


$（文档）.ready（函数（）{
var productsInFocus=新的Swiper（“.products in focus”{
下一个按钮：'.product focus next'，
prevButton:“.product focus prev”，
幻灯片视图：4，
循环：false，
间隔：20
});
});
.content包装器{
最大宽度：1100px；
保证金：0自动；
}
.产品包装{
位置：相对位置；
边缘底部：1rem*5；
页边顶部：1rem*5；
.滑梯{
显示器：flex；
证明内容：中心；
调整项目：灵活启动；
位置：相对位置；
最小高度：230px；
.产品徽章包装{
位置：绝对位置；
底部：0；
右：0；
.产品徽章{
位置：相对位置；
宽度：100px；
溢出：隐藏；
&瑞德先生{
&：之前，
&：之后{
边框颜色：#CF043C；
背景色：透明；
}
&：之后{
背景色：透明；
左边框颜色：透明；
}
.产品徽章内容{
&：之前{
边框颜色：颜色变深（10%）；
左边框颜色：透明；
右边框颜色：透明；
}
}
}
&.深灰色{
&：之前，
&：之后{
边框颜色：浅色（#000，37.4%）；
背景色：透明；
}
&：之后{
背景色：透明；
左边框颜色：透明；
}
.产品徽章内容{
&：之前{
边框颜色：浅色（#000，13.5%）；
左边框颜色：透明；
右边框颜色：透明；
}
}
}
&：之前，
&：之后{
内容：“；
位置：绝对位置；
左：0；
背景色：透明；
边框颜色：浅色（#000，73%）；
}
&：之前{
顶部：20px；
右：0；
底部：0；
}
&：之后{
底部：自动；
左：-1px；
顶部：-10px；
边框样式：实心；
边框宽度：0 0 75px 75px；
背景色：透明；
左边框颜色：透明；
宽度：100px；
}
.产品徽章内容{
高度：43px；
右侧填充：5px；
左侧填充：22px；
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
文本对齐：右对齐；
文本转换：大写；
字号：700；
位置：相对位置；
z指数：10；
颜色：#fff；
&.文本小{
字体大小：.7rem；
字体重量：400！重要；
}
&：之前{
内容：“；
位置：绝对位置；
左：11px；
底部：0；
显示：块；
边框样式：实心；
边框颜色：浅色（#000，37.4%）；
左边框颜色：透明；
右边框颜色：透明；
边框宽度：10px 10px 0 10px；
}
}
}
}
.产品信息包装{
位置：绝对位置；
底部：0；
最大宽度：100%；
宽度：100%；
垫底：10px；
.产品信息{
位置：相对位置；
填充：1rem*.5；
右侧填充：1rem*2；
溢出：隐藏；
&-链接{
显示：块；
a{
颜色：变浅（37.4%）；
过渡：颜色400ms，易于输入输出；
&：悬停{
颜色：#CF043C；
文字装饰：无；
}
}
}
&-价格{
颜色：#CF043C；
&-德尔{
颜色：变浅（37.4%）；
文字装饰：线条贯通；
字体大小：.9rem；
}
}
&：之前，
&：之后{
位置：绝对位置；
内容：“；
左：0；
z指数：-1；
背景色：浅色（#000，93.5%）；
边框颜色：浅色（#000，93.5%）；
}
&：之前
.swiper-slide {
  padding-bottom: 30px;
}

.swiper-container {
  overflow: visible;
}
$slide: ".swiper-slide";
.swiper-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
  &-active {
    opacity: 1;
    visibility: visible;

    @for $i from 1 through 3 {
      & + #{$slide} {
        opacity: 1;
        visibility: visible;
      }
      $slide: "#{$slide} + .swiper-slide";
    }
  }
}

.swiper-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}
.swiper-slide-active {
  opacity: 1;
  visibility: visible;
}
.swiper-slide-active + .swiper-slide {
  opacity: 1;
  visibility: visible;
}
.swiper-slide-active + .swiper-slide + .swiper-slide {
  opacity: 1;
  visibility: visible;
}
.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
  opacity: 1;
  visibility: visible;
}

<style>
//as we want to see details which are being cut of by default css from swiper contner we change it top overflow visible.
.swiper-container {
    overflow: visible; 
}
//we changed over hidden to visible all slides of the swiper slider would we visible so we need to hide them so we add below css.
.swiper-slide{
    opacity: 0;
    visibility: hidden;
}
// now because of the above css all the slider are set to opacity 0 , which makes them not visible, now as we want to see out active and next slide we supply below css by using their name. and set there opacity to 1.
.swiper-slide.swiper-slide-active,.swiper-slide.swiper-slide-next,.swiper-slide.swiper-slide-prev{
opacity: 1;
    visibility: visible;
}
</style>