html - 如何将此滑块调整到特定的高度/宽度
问题描述
我在响应式图像幻灯片上关注本教程,我进入教程时认为我可以将幻灯片调整到一定的高度和宽度,使其更小并适合我想要做的想法。可悲的是,我被卡住了,无法找到解决方法,所以我来到这里希望能解决这个问题。
这是我正在尝试做的图片
这是我的 HTML
.slide-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.slide-container .slider {
position: absolute;
top: 0;
left: 0;
width: 500%;
height: 100%;
float: left;
animation: animate 10s linear infinite;
}
.slide-container .slider .slide {
position: relative;
width: 20%;
height: 100%;
float : left;
}
.slide-container .slider .slide .caption{
position: absolute;
bottom: 60px;
left: 60px;
right: 60px;
padding: 30px;
background: rgba(0,0,0,0.5);
box-sizing: border-box;
}
.slide-container .slider .slide .caption h2 {
margin: 0 0 20px;
padding: 0;
color: white;
font-size: 48px;
}
.slide-container .slider .slide .caption p {
margin: 0;
padding: 0;
color: white;
font-size: 18px;
}
.slide-container .slider .slide.slide1 {
background: url(../images/heroImage2.jpg);
background-size: cover;
background-position: center;
}
.slide-container .slider .slide.slide2 {
background: url(../images/heroImage.jpg);
background-size: cover;
background-position: center;
}
.slide-container .slider .slide.slide3 {
background: url(../images/heroImage2.jpg);
background-size: cover;
background-position: center;
}
.slide-container .slider .slide.slide4 {
background: url(../images/heroImage2.jpg);
background-size: cover;
background-position: center;
}
@keyframes animate {
0%
{
left: 0;
}
20%
{
left: 0;
}
25%
{
left: -100%;
}
45%
{
left: -100%;
}
50%
{
left: -200%;
}
70%
{
left: -200%;
}
75%
{
left: -300%;
}
95%
{
left: -300%;
}
100% {
left: -400%;
}
}
@media (max-width: 768px) {
.slide-container .slider .slide .caption{
bottom: 20px;
left: 20px;
right: 20px;
padding: 20px;
background: rgba(0,0,0,0.5);
box-sizing: border-box;
}
.slide-container .slider .slide .caption h2 {
margin: 0 0 10px;
font-size: 30px;
}
.slide-container .slider .slide .caption p {
font-size: 16px;
}
}
<div class="slide-container">
<div class="slider">
<div class="slide slide1">
<div class="caption">
<h2>Slide1</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide2">
<div class="caption">
<h2>Slide2</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide3">
<div class="caption">
<h2>Slide3</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide4">
<div class="caption">
<h2>Slide4</h2>
<p>Test</p>
</div>
</div>
</div>
</div>
解决方案
您可以使用 flex 容器并最终在动画上设置延迟,这样它们就不会同时开始。
如果我理解的话,可能的例子。
body{margin:0;}
section {
display: flex;
height: 100vh;
gap: 5vw;
padding: 5vw;
box-sizing: border-box;
}
.slide-container {
position: relative;
flex-grow: 1;
background:lightgray;
overflow: hidden;
}
.slide-container .slider {
position: absolute;
top: 0;
left: 0;
width: 500%;
height: 100%;
float: left;
animation: animate 10s linear infinite;
}
.slide-container + .slide-container .slider {
animation-delay:-3.3s;
}.slide-container +.slide-container + .slide-container .slider {
animation-delay:-6.6s;
}
.slide-container .slider .slide {
position: relative;
width: 20%;
height: 100%;
float: left;
}
.slide-container .slider .slide .caption {
position: absolute;
bottom: 6px;
left: 6px;
right: 6px;
padding: 3px;
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
.slide-container .slider .slide .caption h2 {
margin: 0 0 20px;
padding: 0;
color: white;
font-size: 48px;
}
.slide-container .slider .slide .caption p {
margin: 0;
padding: 0;
color: white;
font-size: 18px;
}
.slide-container .slider .slide.slide1 {
background: url(https://picsum.photos/id/1012/400/280);
background-size: cover;
background-position: center;
}
.slide-container .slider .slide.slide2 {
background: url(https://picsum.photos/id/1014/400/280);
background-size: cover;
background-position: center;
}
.slide-container .slider .slide.slide3 {
background: url(https://picsum.photos/id/1016/400/280);
background-size: cover;
background-position: center;
}
.slide-container .slider .slide.slide4 {
background: url(https://picsum.photos/id/1018/400/280);
background-size: cover;
background-position: center;
}
@keyframes animate {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
@media (max-width: 768px) {
.slide-container .slider .slide .caption {
bottom: 20px;
left: 20px;
right: 20px;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
.slide-container .slider .slide .caption h2 {
margin: 0 0 10px;
font-size: 30px;
}
.slide-container .slider .slide .caption p {
font-size: 16px;
}
}
<section>
<div class="slide-container">
<div class="slider">
<div class="slide slide1">
<div class="caption">
<h2>Slide1</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide2">
<div class="caption">
<h2>Slide2</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide3">
<div class="caption">
<h2>Slide3</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide4">
<div class="caption">
<h2>Slide4</h2>
<p>Test</p>
</div>
</div>
</div>
</div>
<div class="slide-container">
<div class="slider">
<div class="slide slide1">
<div class="caption">
<h2>Slide1</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide2">
<div class="caption">
<h2>Slide2</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide3">
<div class="caption">
<h2>Slide3</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide4">
<div class="caption">
<h2>Slide4</h2>
<p>Test</p>
</div>
</div>
</div>
</div>
<div class="slide-container">
<div class="slider">
<div class="slide slide1">
<div class="caption">
<h2>Slide1</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide2">
<div class="caption">
<h2>Slide2</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide3">
<div class="caption">
<h2>Slide3</h2>
<p>Test</p>
</div>
</div>
<div class="slide slide4">
<div class="caption">
<h2>Slide4</h2>
<p>Test</p>
</div>
</div>
</div>
</div>
</section>
推荐阅读
- javascript - 根据 div 高度拆分溢出文本
- css - 如何清除 iphone 6 上的缓存以重新加载 css 文件
- node.js - AzureDevOps 管道 - Nightwatch selenium 独立安装问题 - 无法运行 npm run 'e2e-setup'(包含 'selenium-standalone install')
- aws-lambda - 无服务器 - 发电机流 - 如何设置destinationConfig?
- python - 如何在计算差异之前包含列表的第一个元素
- node.js - 如何在猫鼬中返回一个 json 对象以及总数?
- c - 对给定的 tid 使用 PTRACE_GET_THREAD_AREA
- javascript - 根据单选按钮检查跳到特定步骤
- android - 使用便宜的安卓手机制作生物识别考勤系统
- python - Python 3 中的代理类