在画廊幻灯片中隐藏额外的图像

Question

我正在尝试部分隐藏这些图像。在此示例中，您可以看到“四”和“五”图像超出了列表，因此我需要隐藏不应该显示的部分。

这是正在发生的事情： Codepen example

这是我正在尝试做的事情：

HTML代码：

<div class="gallery-row">
  <ul class="list">
    <div class="list__item">
      <img class="list__thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/NYCS-bull-trans-1.svg/1024px-NYCS-bull-trans-1.svg.png">
    </div>
    //and four more images below
  </ul>
</div>

SASS代码：

.gallery-row {
  width: 800px;
  background-color: blue;
  .list {
      display: flex;
      gap: 20px;
      list-style: none;
      width: 100%;
      .list__item {
        min-width: 220px;
        height: 220px;
        .list__thumbnail {
          width: 100%;
          height: 100%;
        }
      }
    }
}

Answer 1

经过进一步调查，我找到了一个解决方案，只需在“gallery-row”div 标签中添加 overflow: hidden。

Answer 2

只需将此代码添加到您的 .gallery-row.

overflow : hidden

Answer 3

为您的 .gallery-row class 添加隐藏溢出。

.gallery-row {
  width: 800px;
  background-color: blue;
  overflow: hidden;
  .list {
      display: flex;
      gap: 20px;
      list-style: none;
      width: 100%;
      .list__item {
        min-width: 220px;
        height: 220px;
        .list__thumbnail {
          width: 100%;
          height: 100%;
        }
      }
    }
}

下面是实现相同效果的更简单的实现

<div class="row">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/NYCS-bull-trans-1.svg/1024px-NYCS-bull-trans-1.svg.png">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Icon_2_%28set_basic%29.png"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/NYCS-bull-trans-4-red.svg/2048px-NYCS-bull-trans-4-red.svg.png"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/NYCS-bull-trans-1.svg/1024px-NYCS-bull-trans-1.svg.png">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Channel_5_logo_2011.svg/1024px-Channel_5_logo_2011.svg.png">
</div>

.row {
  width: 800px;
  background-color: blue;
  display: flex;
  gap: 1.25rem;
  overflow: hidden;
}

.row img {
  min-width: 220px;
  height: 220px;
}

Answer 4

.gallery-row {
  width: 800px;
  background-color: blue;
  overflow: hidden;
  .list {
      display: flex;
      gap: 20px;
      list-style: none;
      width: 100%;
      .list__item {
        min-width: 220px;
        height: 220px;
        .list__thumbnail {
          width: 100%;
          height: 100%;
        }
      }
    }
}

<div class="gallery-row">
  <ul class="list">
    <div class="list__item">
      <img class="list__thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/NYCS-bull-trans-1.svg/1024px-NYCS-bull-trans-1.svg.png">
    </div>
    <div class="list__item">
      <img class="list__thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Icon_2_%28set_basic%29.png"> 
    </div>
    <div class="list__item">
      <img class="list__thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/NYCS-bull-trans-3.svg/1200px-NYCS-bull-trans-3.svg.png"> 
    </div>
    <div class="list__item">
      <img class="list__thumbnail" style="visibility: hidden;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/NYCS-bull-trans-4-red.svg/2048px-NYCS-bull-trans-4-red.svg.png">  
    </div>
    <div class="list__item">
      <img class="list__thumbnail" style="visibility: hidden;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Channel_5_logo_2011.svg/1024px-Channel_5_logo_2011.svg.png"> 
    </div>
  </ul>
</div>

在画廊幻灯片中隐藏额外的图像

Hide extra images in gallery slideshow

html

css

image

gallery

carousel