javascript - 如何从我的图片库中制作一个滑块

Question

我有一个看起来像这样的照片库：

每当我添加一张照片时，这些卡片会变得越来越小，但我想一次只显示 4 张照片并隐藏其他照片，并制作某种滑块。我尝试更改容器宽度并制作溢出-x：滚动，但它似乎不起作用。我可以用这种画廊风格实现滑块效果吗？如何？我是 js 新手，所以我尝试在其他网站上寻找解决方案，但它们只有静态卡片，我不知道如何在我的画廊中实现它。

.containerss {
  display: flex;
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 86vh;
}

.box {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 2%;
  box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
  line-height: 0;
  background-color: black;
}

.box>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}

.box:hover {
  flex: 1 1 40%;
}

.box:hover>img {
  width: 100%;
  height: 100%;
}

<div class="containerss">
  <div class="box">
    <img src="https://source.unsplash.com/1000x807" loading=lazy>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x808" loading=lazy>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x810" loading=lazy>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x802" loading=lazy>
  </div>
</div>

标签： javascripthtmlcss

Answer 1

您可以使用100%带有水平滚动的宽度包装器来包装您的画廊，然后根据需要加宽您的画廊容器。

.wrapper{
    width:100%;
    overflow: scroll-x;
}

.containerss {
    display: flex;
    width: 130%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: 86vh;
}

.box {
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
    line-height: 0;
    background-color: black;
}

.box>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

.box:hover {
    flex: 1 1 40%;
}

.box:hover>img {
    width: 100%;
    height: 100%;
}

<div class="wrapper">
    <div class="containerss">
        <div class="box">
            <img src="https://source.unsplash.com/1000x807" loading=lazy>
        </div>
        <div class="box">
            <img src="https://source.unsplash.com/1000x808" loading=lazy>
        </div>
        <div class="box">
            <img src="https://source.unsplash.com/1000x810" loading=lazy>
        </div>
        <div class="box">
            <img src="https://source.unsplash.com/1000x802" loading=lazy>
        </div>
        <div class="box">
            <img src="https://source.unsplash.com/1000x802" loading=lazy>
        </div>
    </div>
</div>