那些遇到过的问题

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

Pat*_*ser 4 html css

问题

我有一个 swiper 滑块：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;on .product-info-wrapper（包装盒子和徽章）更改为position: fixed;，因为我读到溢出属性被position: fixed;. 然而，这似乎并不能解决问题。

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

片段

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

$(document).ready(function() {
  var productsInFocus = new Swiper ('.products-in-focus', {
    nextButton: '.product-focus-next',
    prevButton: '.product-focus-prev',
    slidesPerView: 4,
    loop: false,
    spaceBetween: 20
  });
});
Run Code Online (Sandbox Code Playgroud) 
.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;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/b13050afbe.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="content-wrapper narrow products-in-focus">
    <div class="product-wrapper">
      <div class="swiper-container products-in-focus">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://www.placehold.it/80x130">
            <div class="product-info-wrapper">
              <div class="product-info">
                <div class="row no-gutters">
                  <div class="col-7">
                    <strong class="text-uppercase">Amino Force</strong>
                    <span class="product-info-link"><a href="#">Kurzinfo</a></span>
                  </div>
                  <div class="col-5 text-right">
                   
                    <div class="product-info-price">CHF 34.00</div>
                  </div>
                </div>
              </div>
              <div class="product-badge-wrapper">
                <div class="product-badge dark-gray">
                  <div class="product-badge-content text-center">
                    %&nbsp;&nbsp;
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="http://www.placehold.it/80x130">
            <div class="product-info-wrapper">
              <div class="product-info">
                <div class="row no-gutters">
                  <div class="col-8">
                    <strong class="text-uppercase">Basic Minerals</strong>
                    <span class="product-info-link"><a href="#">Kurzinfo</a></span>
                  </div>
                  <div class="col-4 text-right">
                    <span class="product-info-price">CHF 34.00</span>
                  </div>
                </div>
              </div>
              <div class="product-badge-wrapper">
                <div class="product-badge red">
                  <div class="product-badge-content">
                    new
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="http://www.placehold.it/80x130">
            <div class="product-info-wrapper">
              <div class="product-info">
                <div class="row no-gutters">
                  <div class="col-8">
                    <strong class="text-uppercase">Amino Force</strong>
                    <span class="product-info-link"><a href="#">Kurzinfo</a></span>
                  </div>
                  <div class="col-4 text-right">
                    <span class="product-info-price">CHF 34.00</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="http://www.placehold.it/80x130">
            <div class="product-info-wrapper">
              <div class="product-info">
                <div class="row no-gutters">
                  <div class="col-8">
                    <strong class="text-uppercase">Whey Isolat CFM</strong>
                    <span class="product-info-link"><a href="#">Kurzinfo</a></span>
                  </div>
                  <div class="col-4 text-right">
                    <span class="product-info-price">CHF 34.00</span>
                  </div>
                </div>
              </div>
              <div class="product-badge-wrapper">
                <div class="product-badge">
                  <div class="product-badge-content text-small">
                    nicht<br>auf lager
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="http://www.placehold.it/80x130">
            <div class="product-info-wrapper">
              <div class="product-info">
                <div class="row no-gutters">
                  <div class="col-8">
                    <strong class="text-uppercase">Amino Force</strong>
                    <span class="product-info-link"><a href="#">Kurzinfo</a></span>
                  </div>
                  <div class="col-4 text-right">
                    <span class="product-info-price">CHF 34.00</span>
                  </div>
                </div>
              </div>
              <div class="product-badge-wrapper">
                <div class="product-badge red">
                  <div class="product-badge-content">
                    new
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="http://www.placehold.it/80x130">
            <div class="product-info-wrapper">
              <div class="product-info">
                <div class="row no-gutters">
                  <div class="col-8">
                    <strong class="text-uppercase">Basic Minerals</strong>
                    <span class="product-info-link"><a href="#">Kurzinfo</a></span>
                  </div>
                  <div class="col-4 text-right">
                    <span class="product-info-price">CHF 34.00</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="http://www.placehold.it/80x130">
            <div class="product-info-wrapper">
              <div class="product-info">
                <div class="row no-gutters">
                  <div class="col-8">
                    <strong class="text-uppercase">Amino Force</strong>
                    <span class="product-info-link"><a href="#">Kurzinfo</a></span>
                  </div>
                  <div class="col-4 text-right">
                    <span class="product-info-price">CHF 34.00</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="http://www.placehold.it/80x130">
            <div class="product-info-wrapper">
              <div class="product-info">
                <div class="row no-gutters">
                  <div class="col-8">
                    <strong class="text-uppercase">Whey Isolat CFM</strong>
                    <span class="product-info-link"><a href="#">Kurzinfo</a></span>
                  </div>
                  <div class="col-4 text-right">
                    <span class="product-info-price">CHF 34.00</span>
                  </div>
                </div>
              </div>
              <div class="product-badge-wrapper">
                <div class="product-badge">
                  <div class="product-badge-content text-small">
                    nicht<br>auf lager
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="product-focus-prev"><i class="fa fa-chevron-left"></i></div>
      <div class="product-focus-next"><i class="fa fa-chevron-right"></i></div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

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

sdv*_*ksv 6

你可以加：

.swiper-slide {
  padding-bottom: 30px;
}
Run Code Online (Sandbox Code Playgroud)

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

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

Pat*_*ser 3

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

.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";
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

所以，我在这里所做的就是设置.swiper-container从overflow: hidden;到overflow: visible然后我告诉除了那个之外的每个.swiper-slide都有。然后，我使用幻灯片作为起点，并通过 sass for 循环迭代 3 次，以添加接下来的 3秒。此 sass 代码生成以下纯 css 代码（此处未包含）opacity: 0;&-active&-activeopacity: 1;.swiper-slide.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;
}
Run Code Online (Sandbox Code Playgroud)

这整个内容只是为了删除其中的内容overflow: hidden;，.swiper-container同时仍然只显示我需要查看的幻灯片并隐藏其他幻灯片。现在我可以调整信息框的高度和我正在寻找的效果。

归档时间：

查看次数：

14608 次

最近记录：

5 年，8 月 前
相关归档
是否有一个颠倒的插入符号？ 247
将光标更改为手指指针 214
AngularJS指令限制A对E 112
我可以将变量用于选择器吗？ 64
HTML表单`name`属性有什么意义？ 51
资源被解释为文档但使用MIME类型text/css传输 36
HTML中不需要P-end-tag(</ p>) 26
Android Webkit:绝对定位的元素不尊重z-index 23
react-router v5.1.0 无法读取 undefined 的属性“位置”， 17
为什么有时填充高度？ 16
难疑归档
关闭/隐藏Android软键盘 3641
如何从列表列表中制作一个平面列表？ 2950
确定已安装的PowerShell版本 2543
finally块总是在Java中执行吗？ 2281
如何在Python中将字符串解析为float或int？ 2108
何时在JavaScript中使用双引号或单引号？ 1903
如何调试Node.js应用程序？ 1531
从HTML页面重定向 1523
如何在Python中追加文件？ 1446
为PHP密码保护哈希和盐 1142