[英]Pure CSS 3 image slider with autoplay and overlay text
So I'm trying to make a pure CSS3 autoplaying image slider on a web page project I'm doing. 因此,我尝试在正在执行的网页项目上制作一个纯CSS3自动播放图像滑块。 So the HTML of the page looks like this: 因此页面的HTML如下所示:
https://pastebin.com/c0ZiyHGd https://pastebin.com/c0ZiyHGd
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Joelson Querub</title>
</head>
<body>
<header>
<nav>
<a href="portfolio.html">Portfolio</a>
<a href="sobre.html">Sobre</a>
<a href="loja.html">Loja</a>
</nav>
</header>
<main>
<div id="pinto">
<h1>Joelson Querub</h1>
<div id="images">
<img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=92b82a18bf4bfbdfe1bd7eed8cd4ba49&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71d59cd22de21da8d2939bc203617983&auto=format&fit=crop&w=1560&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e79d1986f31127432328ba0b78f0b510&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80"
alt="Pug Fofoso">
</div>
</div>
</main>
</body>
</html>
So what I want is to only one pug image appear at a time, and to make them automatically slide leftwards. 因此,我想要的是一次只显示一个哈巴狗图像,并使它们自动向左滑动。 The size is important, and the current size is the one I want. 大小很重要,当前大小是我想要的大小。 Also, notice that there is a text overlaying the image. 另外,请注意在图像上覆盖了文字。 That text must stay there. 该文本必须留在那里。 I would like to do a smooth slide that is infinite, but that doesn't do that subtle return to the first image. 我想做一个平滑的无限滑动,但这并不能使返回的第一张图像变得微妙。
I tried my luck with some CSS but it din't go very far. 我尝试了一些CSS来实现好运,但是进展并不顺利。 You guys can take a look: 你们可以看看:
https://pastebin.com/S2UZ4uK2 https://pastebin.com/S2UZ4uK2
Or for an easier way to see it all: 或者以更简单的方式查看全部内容:
https://codepen.io/anon/pen/OwWgoX https://codepen.io/anon/pen/OwWgoX
Though CodePen messes up with the text positioning. 虽然CodePen弄乱了文本的位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.