我正在尝试创建一个与此类似的幻灯片/滑块：https://www.earn-a-living.com/en/episodes/
这是我到目前为止所拥有的： https://jsfiddle.net/Santos1600/yet42srh/
.html
<!DOCTYPE html>
<html>
<head>
<title>Freud Got Lynched</title>
<link rel="stylesheet" type="text/css" href="site.css">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;523;600;700;800&display=swap" rel="stylesheet">
<script type="text/javascript" src="site.js"></script>
<meta charset="UTF-8">
</head>
<body>
<section class="episodios">
<div class="slideshow-container">
<div class="mySlides fade">
<img src="assets/fundo.png" width="523" height="294">
<div class="tituloep">Título do Episódio1</div>
<div class="descricaoep">Pequena descrição do episódio a ocupar, no máximo dos maximos, duas linhas.</div>
</div>
<div class="mySlides fade">
<img src="assets/fundo.png" width="523" height="294">
<div class="tituloep">Título do Episódio2</div>
<div class="descricaoep">Pequena descrição do episódio a ocupar, no máximo dos maximos, duas linhas.</div>
</div>
<div class="mySlides fade">
<img src="assets/fundo.png" width="523" height="294">
<div class="tituloep">Título do Episódio3</div>
<div class="descricaoep">Pequena descrição do episódio a ocupar, no máximo dos maximos, duas linhas.</div>
</div>
<div class="mySlides fade">
<img src="assets/fundo.png" width="523" height="294">
<div class="tituloep">Título do Episódio4</div>
<div class="descricaoep">Pequena descrição do episódio a ocupar, no máximo dos maximos, duas linhas.</div>
</div>
<div class="mySlides fade">
<img src="assets/fundo.png" width="523" height="294">
<div class="tituloep">Título do Episódio5</div>
<div class="descricaoep">Pequena descrição do episódio a ocupar, no máximo dos maximos, duas linhas.</div>
</div>
<div class="mySlides fade">
<img src="assets/fundo.png" width="523" height="294">
<div class="tituloep">Título do Episódio5</div>
<div class="descricaoep">Pequena descrição do episódio a ocupar, no máximo dos maximos, duas linhas.</div>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</section>
</body>
</html>
.CSS
.episodios {
width: 100%;
background-color: black;
}
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
display: block;
overflow-x: hidden;
}
.mySlides {
width: 523px;
margin: auto;
display: none;
height: 500px;
}
.tituloep {
color: #f2f2f2;
font-size: 20pt;
font-weight: bold;
font-family: 'Manrope';
padding-left: 0px;
padding-top: 10px;
position: relative;
top: 20px;
width: 100%; }
.descricaoep {
color: #f2f2f2;
font-size: 13pt;
padding-top: 10px;
padding-left: 0px;
font-family: 'Manrope';
position: relative;
top: 20px;
width: 100%; }
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 30px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0px 0px 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: gray;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2.5s;
animation-name: fade;
animation-duration: 2.5s;
}
@-webkit-keyframes fade {
from {opacity: .2}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .2}
to {opacity: 1}
}
爪哇语
//Slideshow
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1;}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
除了我不知道如何使幻灯片/滑块在任何给定时刻在屏幕上可见多个 iten 之外，我当前的代码似乎也无法正常工作，因为当我加载页面时，第一项保持隐藏状态，并且仅在单击上一个和下一个按钮后出现。
有什么想法吗？
你不能用淡入淡出动画来做到这一点。
.slideshow-container {
display: flex;
justify-content: center;
}
.mySlides {
/* display: none; */
flex: 1 1 calc(100% / 3);
}
这不是正确的方法。问题的解决方法。
我建议使用其中一个滑块包。
- https://kenwheeler.github.io/slick/
- https://swiperjs.com/