如何添加 x-axis 可滚动滑块?
How can I add a x-axis scrollable slider?
我正在尝试添加一个 x-axis 可滚动滑块,但似乎无法弄清楚。
在这里,我正在尝试做一个水平的卡片卷轴。如果我向卡片包装器添加填充,它会将自己扩展到 body 之外。我不想发生这种情况。因此我删除了填充并添加了 overflow-x: scroll
。我认为它会解决问题,我将能够滚动 left/right。
请告诉我如何在不退出 body.
的情况下添加卷轴
提前致谢。
.services {
display: flex;
flex-direction: column;
width: 100%;
overflow-x: visible;
height: fit-content;
align-items: center;
justify-content: space-between;
padding: 30px 0;
}
.cardWrapper {
display: flex;
background: red;
overflow-x: scroll;
flex-direction: row;
justify-content: space-around;
}
.cardContainer {
width: 500px;
height: 500px;
background: blue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.cardContainer .cardsImage {
width: 60%;
}
.cardContainer .cardsImage img {
width: 100%;
}
.cardContainer .cardContents {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="services">
<h1>Our Services</h1>
<div class="cardWrapper">
<div class="cardContainer">
<div class="cardsImage">
<img src="https://via.placeholder.com/300" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="https://via.placeholder.com/300" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="https://via.placeholder.com/300" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
</div>
</div>
您需要一个简单的包装器作为滚动条的边界。然后在里面你需要你的 flex 内容的包装器。
此外,仅在 flex 上下文中的元素上使用 width
是不够的。您还需要提供 flex
.services {
padding: 30px 0;
}
.cardWrapperOuter {
overflow-x: scroll;
}
.cardWrapper {
display: flex;
background: red;
}
.cardContainer {
flex: 0 0 500px;
width: 500px;
height: 500px;
background: blue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.cardContainer .cardsImage {
width: 60%;
}
.cardContainer .cardsImage img {
width: 100%;
}
.cardContainer .cardContents {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="services">
<h1>Our Services</h1>
<div class="cardWrapperOuter">
<div class="cardWrapper">
<div class="cardContainer">
<div class="cardsImage">
<img src="./assets/images/QaServices.svg" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="./assets/images/QaServices.svg" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="./assets/images/QaServices.svg" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
</div>
</div>
</div>
我正在尝试添加一个 x-axis 可滚动滑块,但似乎无法弄清楚。
在这里,我正在尝试做一个水平的卡片卷轴。如果我向卡片包装器添加填充,它会将自己扩展到 body 之外。我不想发生这种情况。因此我删除了填充并添加了 overflow-x: scroll
。我认为它会解决问题,我将能够滚动 left/right。
请告诉我如何在不退出 body.
提前致谢。
.services {
display: flex;
flex-direction: column;
width: 100%;
overflow-x: visible;
height: fit-content;
align-items: center;
justify-content: space-between;
padding: 30px 0;
}
.cardWrapper {
display: flex;
background: red;
overflow-x: scroll;
flex-direction: row;
justify-content: space-around;
}
.cardContainer {
width: 500px;
height: 500px;
background: blue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.cardContainer .cardsImage {
width: 60%;
}
.cardContainer .cardsImage img {
width: 100%;
}
.cardContainer .cardContents {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="services">
<h1>Our Services</h1>
<div class="cardWrapper">
<div class="cardContainer">
<div class="cardsImage">
<img src="https://via.placeholder.com/300" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="https://via.placeholder.com/300" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="https://via.placeholder.com/300" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
</div>
</div>
您需要一个简单的包装器作为滚动条的边界。然后在里面你需要你的 flex 内容的包装器。
此外,仅在 flex 上下文中的元素上使用 width
是不够的。您还需要提供 flex
.services {
padding: 30px 0;
}
.cardWrapperOuter {
overflow-x: scroll;
}
.cardWrapper {
display: flex;
background: red;
}
.cardContainer {
flex: 0 0 500px;
width: 500px;
height: 500px;
background: blue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.cardContainer .cardsImage {
width: 60%;
}
.cardContainer .cardsImage img {
width: 100%;
}
.cardContainer .cardContents {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="services">
<h1>Our Services</h1>
<div class="cardWrapperOuter">
<div class="cardWrapper">
<div class="cardContainer">
<div class="cardsImage">
<img src="./assets/images/QaServices.svg" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="./assets/images/QaServices.svg" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="./assets/images/QaServices.svg" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
</div>
</div>
</div>