css - 更改此轮播中的项目数
问题描述
我找到了这个旋转木马并想使用它。问题是原始轮播有很多幻灯片(大约 8 张),而我只想要 3 张。看起来这很简单,但我无法让它在 3 张幻灯片上正常工作。相反,它完成了三张幻灯片,然后等待我删除的额外幻灯片在重复之前滚动浏览所花费的时间。
我已经尝试了很多东西。从中删除一个元素.vertical_carousel__item:nth-child()
什么都不做。这样做然后调整animation: carousel-animate-vertical 27s linear infinite
只会导致轮播卡顿而不是平稳移动,而且更改也会animation-delay: calc(3s * -1)
导致幻灯片重叠。
我已经尝试了很多组合,但无法让它顺利运行并在我的三张幻灯片之后循环播放,而无需等待 15 秒才能再次循环播放。
任何帮助将不胜感激。
<div class="vertical_carousel_div">
<div class="vertical_carousel">
<div class="vertical_carousel__item">
<div class="vertical_carousel__item-head">
</div>
<div class="vertical_carousel__item-body">
<p class="vertical_carousel_title">1</p>
</div>
</div>
<div class="vertical_carousel__item">
<div class="vertical_carousel__item-head">
</div>
<div class="vertical_carousel__item-body">
<p class="vertical_carousel_title">2</p>
</div>
</div>
<div class="vertical_carousel__item">
<div class="vertical_carousel__item-head">
</div>
<div class="vertical_carousel__item-body">
<p class="vertical_carousel_title">3</p>
</div>
</div>
</div>
</div>
.vertical_carousel__item {
display: flex;
align-items: center;
position: absolute;
width: 100%;
padding: 0 12px;
opacity: 0;
filter: drop-shadow(0 2px 2px #555);
will-change: transform, opacity;
animation: carousel-animate-vertical 27s linear infinite;
}
.vertical_carousel__item:nth-child(1) {
animation-delay: calc(3s * -1);
}
.vertical_carousel__item:nth-child(2) {
animation-delay: calc(3s * 0);
}
.vertical_carousel__item:nth-child(3) {
animation-delay: calc(3s * 1);
}
.vertical_carousel__item:nth-child(4) {
animation-delay: calc(3s * 2);
}
.vertical_carousel__item:nth-child(5) {
animation-delay: calc(3s * 3);
}
.vertical_carousel__item:nth-child(6) {
animation-delay: calc(3s * 4);
}
.vertical_carousel__item:nth-child(7) {
animation-delay: calc(3s * 5);
}
.vertical_carousel__item:nth-child(8) {
animation-delay: calc(3s * 6);
}
.vertical_carousel__item:last-child {
animation-delay: calc(-3s * 2);
}
谢谢你。
解决方案
你可以
- 将 HTML 元素的数量删除为 3。
- 将时间从 27s 调整为 9s
animation-duration
。 - 您需要根据元素调整关键帧步数。
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: 'Work Sans', sans-serif;
font-weight: 400;
height: 100vh;
}
.wrapper {
background: linear-gradient(60deg, #420285, #08BDBD);
height: 100%;
width: 100%;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.carousel {
position: relative;
width: 100%;
max-width: 500px;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.carousel__item {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
position: absolute;
width: 100%;
padding: 0 12px;
opacity: 0;
-webkit-filter: drop-shadow(0 2px 2px #555);
filter: drop-shadow(0 2px 2px #555);
will-change: transform, opacity;
-webkit-animation: carousel-animate-vertical 9s linear infinite;
animation: carousel-animate-vertical 9s linear infinite;
}
.carousel__item:nth-child(1) {
-webkit-animation-delay: calc(3s * -1);
animation-delay: calc(3s * -1);
}
.carousel__item:nth-child(2) {
-webkit-animation-delay: calc(3s * 0);
animation-delay: calc(3s * 0);
}
.carousel__item:last-child {
-webkit-animation-delay: calc(-3s * 2);
animation-delay: calc(-3s * 2);
}
.carousel__item-head {
border-radius: 50%;
background-color: #d7f7fc;
width: 90px;
height: 90px;
padding: 14px;
position: relative;
margin-right: -45px;
flex-shrink: 0;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
font-size: 50px;
}
.carousel__item-body {
width: 100%;
background-color: #fff;
border-radius: 8px;
padding: 16px 20px 16px 70px;
}
.title {
text-transform: uppercase;
font-size: 20px;
margin-top: 10px;
}
@keyframes carousel-animate-vertical {
0% {
transform: translateY(100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
9%,
33.3333333333% {
transform: translateY(100%) scale(0.7);
opacity: .4;
visibility: visible;
}
42.3333333333%,
66.6666666667% {
transform: translateY(0) scale(1);
opacity: 1;
visibility: visible;
}
75.6666666667% {
transform: translateY(-100%) scale(0.7);
opacity: .4;
visibility: visible;
}
100% {
transform: translateY(-100%) scale(0.7);
opacity: .075;
visibility: hidden;
}
}
<div class='wrapper'>
<div class='carousel'>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>spouting whale</p>
<p>Unicode: U+1F433</p>
</div>
</div>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>whale</p>
<p>Unicode: U+1F40B</p>
</div>
</div>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>dolphin</p>
<p>Unicode: U+1F42C</p>
</div>
</div>
</div>
</div>
推荐阅读
- javascript - MongoDB $lookup 和 $group 返回空数组
- laravel - scout:import 将数字附加到 elasticsearch 索引名称
- php - 如何在 Laravel 8 中重命名 .env 文件
- reactjs - React 不显示来自 django 的富文本内容
- python - 如何将 (Py)Gtk Gio.ThemedIcon 转换为 (Py)Qt5 (QImage、QIcon 等) 中可用的任何内容?
- sql - 在 FROM 子句中使用 SELECT 的结果
- python - Python Click - 传递配置文件以提供子命令和选项
- excel - 如何在 customUI 功能区中显示版本号
- bash - bash - 过滤字符串“15m”或更少的条件
- bash - 如果满足 awk IF,则执行另一个 awk