Question

问题

我有一个滑块滑块：http://codepen.io/kerowan/pen/xqYrwJ（例如通过赋予.product-info-wrapper大约100px的固定高度来重新创建问题）

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

当我点击“Kurzinfo”时，该框需要展开，最后看起来像这样（.swiper-container在 NEW 徽章之后结束，所以它必须流在swiper-container上）：

问题是，.swiper-container具有overflow: hidden;属性，用于隐藏继续向右移动的幻灯片。

我做了什么？

1）我尝试将overflow: hidden;上的.swiper-container更改为overflow-x: hidden;，试图隐藏向右流动的幻灯片，但显示向下溢出的内容。这会导致.swiper-container只添加一个滚动条，让您向下滚动以查看应该溢出的内容。

2）我尝试将position: absolute; {包装盒和徽章上的.product-info-wrapper更改为position: fixed;，因为我读到{{1}忽略了overflow属性}。但是，这似乎并没有解决问题。

我还没有尝试过其他任何事情，仅仅因为我不知道任何其他解决方案。

段

我在这里粘贴了片段，但它不起作用，因为我使用SCSS并且遗憾的是没有时间将其重写为纯CSS。但是，如果上面的链接应该死掉，可以复制到codepen。

position: fixed;

$(document).ready(function() {
  var productsInFocus = new Swiper ('.products-in-focus', {
    nextButton: '.product-focus-next',
    prevButton: '.product-focus-prev',
    slidesPerView: 4,
    loop: false,
    spaceBetween: 20
  });
});

.content-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

.product-wrapper {
  position: relative;
  margin-bottom: 1rem * 5;
  margin-top: 1rem * 5;
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    min-height: 230px;
    .product-badge-wrapper {
      position: absolute;
      bottom: 0;
      right: 0;
      .product-badge {
        position: relative;
        width: 100px;
        overflow: hidden;
        &.red {
          &:before,
          &:after {
            border-color: #CF043C;
            background-color: transparent;
          }
          &:after {
            background-color: transparent;
            border-left-color: transparent;
          }
          .product-badge-content {
            &:before {
              border-color: darken(#CF043C, 10%);
              border-left-color: transparent;
              border-right-color: transparent;
            }
          }
        }
        &.dark-gray {
          &:before,
          &:after {
            border-color: lighten(#000, 37.4%);
            background-color: transparent;
          }
          &:after {
            background-color: transparent;
            border-left-color: transparent;
          }
          .product-badge-content {
            &:before {
              border-color: lighten(#000, 13.5%);
              border-left-color: transparent;
              border-right-color: transparent;
            }
          }
        }
        &:before,
        &:after {
          content: "";
          position: absolute;
          left: 0;
          background-color: transparent;
          border-color: lighten(#000, 73%);
        }
        &:before {
          top: 20px;
          right: 0;
          bottom: 0;
        }
        &:after {
          bottom: auto;
          left: -1px;
          top: -10px;
          border-style: solid;
          border-width: 0 0 75px 75px;
          background-color: transparent;
          border-left-color: transparent;
          width: 100px;
        }
        .product-badge-content {
          height: 43px;
          padding-right: 5px;
          padding-left: 22px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          text-align: right;
          text-transform: uppercase;
          font-weight: 700;
          position: relative;
          z-index: 10;
          color: #fff;
          &.text-small {
            font-size: .7rem;
            font-weight: 400 !important;
          }
          &:before {
            content: "";
            position: absolute;
            left: 11px;
            bottom: 0;
            display: block;
            border-style: solid;
            border-color: lighten(#000, 37.4%);
            border-left-color: transparent;
            border-right-color: transparent;
            border-width: 10px 10px 0 10px;
          }
        }
      }
    }
    .product-info-wrapper {
      position: absolute;
      bottom: 0;
      max-width: 100%;
      width: 100%;
      padding-bottom: 10px;
      .product-info {
        position: relative;
        padding: 1rem * .5;
        padding-right: 1rem * 2;
        overflow: hidden;
        &-link {
          display: block;
          a {
            color: lighten(#000, 37.4%);
            transition: color 400ms ease-in-out;
            &:hover {
              color: #CF043C;
              text-decoration: none;
            }
          }
        }
        &-price {
          color: #CF043C;
          &-del {
            color: lighten(#000, 37.4%);
            text-decoration: line-through;
            font-size: .9rem;
          }
        }
        &:before,
        &:after {
          position: absolute;
          content: "";
          left: 0;
          z-index: -1;
          background-color: lighten(#000, 93.5%);
          border-color: lighten(#000, 93.5%);
        }
        &:before {
          top: 0;
          right: 0;
          bottom: 35px;
        }
        &:after {
          top: auto;
          right: -5px;
          bottom: 0;
          border-style: solid;
          border-width: 35px 35px 0 0;
          background-color: transparent;
          border-right-color: transparent;
        }
      }
    }
  }
  .product-focus-prev,
  .product-focus-next {
    position: absolute;
    color: lighten(#000, 37.4%);
    background-image: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .product-focus-prev {
    left: -1rem * 10;
  }
  .product-focus-next {
    right: -1rem * 10;
  }
}

我希望我的问题很清楚。如果您需要更多详细信息，请告诉我们！

Answer 1

您可以添加：

.swiper-slide {
  padding-bottom: 30px;
}

其中30px是您的徽章超出边界的值。

http://codepen.io/Deka87/pen/xqYXOq

Answer 2

我找到了一个解决方案，但我觉得这有点像黑客。对于它的价值，这里是：

.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-container从overflow: hidden;设置为overflow: visible，然后我告诉每个.swiper-slide opacity: 0;除了&-active 1}}一个。然后我使用&-active幻灯片作为起点，并循环遍历sass for-loop 3次，为下一个3 opacity: 1;添加.swiper-slide。这个sass代码生成以下纯css代码（此处未包含.swiper-container）

.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;
}

这一切只是为了从overflow: hidden;移除.swiper-container，同时仍然只显示我需要查看和隐藏其他幻灯片的幻灯片。现在，我可以使用信息框的高度和我正在寻找的效果。

Answer 3

<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>

在Swiper滑块中“溢出：隐藏”之外的显示元素

3 个答案: