0
Итак, я пропустил слайдер изображения, который автоматически перетаскивает изображения, но теперь я хочу добавить раздел кнопки, чтобы люди могли вернуться назад и выбрать изображение, которое они хотят выбрать. , Но когда я пытаюсь запустить Radio Buttons, они исчезают, когда начинается анимация слева ... как я могу исправить кнопки, чтобы они не двигались, и все они срабатывают одновременно?Как добавить переключатели на этот слайдер изображений с помощью CSS
Чтобы узнать, о чем идет речь, перейдите в/Slider/на CSS и на HTML.
/*Header*/
.header {
/*Base*/
background: #22232e;
width: 100%;
top: 0;
position: fixed;
height: 73px;
-webkit-box-shadow: 0px 1px 12px #1e1f2d;
-moz-box-shadow: 0px 1px 12px #1e1f2d;
box-shadow: 0px 1px 12px #1e1f2d;
z-index: 2;
}
.nav {
/*Zona para a Lista*/
margin: 0 auto;
width: 900px;
text-align: center;
}
#lista1 {
/*Lista*/
padding: 15px;
overflow: hidden;
margin: 0 auto;
text-align: center;
}
#lista1 li {
/*Cada linha da Lista*/
list-style: none;
float: left;
margin-left: 60px;
margin-right: auto;
}
a {
/*Link de cada linha*/
transition: all 0.3s ease-in;
text-decoration: none;
text-align: center;
-webkit-animation: fadein 2s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s;
/* Firefox < 16 */
-ms-animation: fadein 2s;
/* Internet Explorer */
-o-animation: fadein 2s;
/* Opera < 12.1 */
animation: fadein 2s;
}
a:hover {
/*Link por cima de cada linha*/
-webkit-stroke-width: 4px;
-webkit-stroke-color: #FFF;
-webkit-fill-color: #FFF;
text-shadow: 1px 0px 20px #8f95e5;
}
/*Body*/
body {
/*Base*/
background-image: url(images/fundo.png);
background-color: #000;
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
.container {
/*Limites da Página*/
width: 960px;
margin: 0 auto;
}
/*Slider*/
#content-slider {
width: 100%;
height: 360px;
margin: auto 0;
top: 100px;
right: 0;
left: 0;
position: relative;
}
#slider {
background: #22232e;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
height: 320px;
width: 700px;
margin: auto;
left: 0;
right: 0;
overflow: visible;
position: relative;
}
#mask {
overflow: hidden;
height: 320px;
}
#slider ul {
margin: 0;
padding: 0;
position: relative;
}
#slider li {
width: 718px;
height: 320px;
position: absolute;
left: -705px;
list-style: none;
}
#slider li.firstanimation {
-moz-animation: cycle 25s linear infinite;
-webkit-animation: cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation: cycletwo 25s linear infinite;
-webkit-animation: cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation: cyclethree 25s linear infinite;
-webkit-animation: cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation: cyclefour 25s linear infinite;
-webkit-animation: cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation: cyclefive 25s linear infinite;
-webkit-animation: cyclefive 25s linear infinite;
}
#slider .tooltip {
background: rgba(23, 24, 36, 0.4);
width: 700px;
height: 60px;
position: absolute;
bottom: -320px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#slider .tooltip h1 {
text-shadow: 0px 0px 2px #171824;
color: #CCC;
font-size: 24px;
text-align: center;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
bottom: 0px;
}
/*Gallery*/
.gallery {
top: 100px;
margin: auto;
width: 716px;
height: 785px;
position: relative;
}
div.img {
display: block;
margin: 7px;
float: left;
width: 165px;
}
div.img:hover {
filter: brightness(150%);
-webkit-filter: brightness(150%);
-webkit-transition: all .6s ease;
}
div.img img {
width: 100%;
height: auto;
}
/*Footer*/
#footer {
margin: auto;
bottom: 0;
left: 0;
right: 0;
background: #22232e;
width: 350px;
height: 63px;
position: fixed;
-webkit-box-shadow: 1px 1px 12px #1e1f2d;
-moz-box-shadow: 1px 1px 12px #1e1f2d;
box-shadow: 1px 1px 12px #1e1f2d;
}
#lista2 {
overflow: hidden;
margin: auto;
text-align: center;
margin: auto;
position: absolute;
bottom: 15;
}
#lista2 li {
list-style: none;
float: left;
padding: 3 px;
}
#lista2 a {
transition: all 0.3s ease-in;
}
#lista2 a:hover {
-webkit-filter: drop-shadow(1px 0px 5px #43476e);
filter: drop-shadow(1px 0px 5px #43476e);
}
/*Animations*/
/*Animação da Header*/
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*Animação do Slider*/
@-moz-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 705px;
opacity: 0;
z-index: 0;
}
21% {
top: -705px;
opacity: 0;
z-index: -1;
}
92% {
top: -705px;
opacity: 0;
z-index: 0;
}
96% {
top: -705px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
@-moz-keyframes cycletwo {
0% {
top: -705px;
opacity: 0;
}
16% {
top: -705px;
opacity: 0;
}
20% {
top: 0px;
opacity: 1;
}
24% {
top: 0px;
opacity: 1;
}
36% {
top: 0px;
opacity: 1;
z-index: 0;
}
40% {
top: 705px;
opacity: 0;
z-index: 0;
}
41% {
top: -705px;
opacity: 0;
z-index: -1;
}
100% {
top: -705px;
opacity: 0;
z-index: -1;
}
}
@-moz-keyframes cyclethree {
0% {
left: -705px;
opacity: 0;
}
36% {
left: -705px;
opacity: 0;
}
40% {
left: 0px;
opacity: 1;
}
44% {
left: 0px;
opacity: 1;
}
56% {
left: 0px;
opacity: 1;
}
60% {
left: 705px;
opacity: 0;
z-index: 0;
}
61% {
left: -705px;
opacity: 0;
z-index: -1;
}
100% {
left: -705px;
opacity: 0;
z-index: -1;
}
}
@-moz-keyframes cyclefour {
0% {
left: -705px;
opacity: 0;
}
56% {
left: -705px;
opacity: 0;
}
60% {
left: 0px;
opacity: 1;
}
64% {
top: 0px;
opacity: 1;
}
76% {
top: 0px;
opacity: 1;
z-index: 0;
}
80% {
top: 705px;
opacity: 0;
z-index: 0;
}
81% {
top: -705px;
opacity: 0;
z-index: -1;
}
100% {
top: -705px;
opacity: 0;
z-index: -1;
}
}
@-moz-keyframes cyclefive {
0% {
left: -705px;
opacity: 0;
}
76% {
left: -705px;
opacity: 0;
}
80% {
left: 0px;
opacity: 1;
}
84% {
left: 0px;
opacity: 1;
}
96% {
left: 0px;
opacity: 1;
z-index: 0;
}
100% {
left: 705px;
opacity: 0;
z-index: 0;
}
}
@-webkit-keyframes cycle {
0% {
left: 0px;
}
4% {
left: 0px;
}
16% {
left: 0px;
opacity: 1;
z-index: 0;
}
20% {
left: 705px;
opacity: 0;
z-index: 0;
}
21% {
left: -705px;
opacity: 0;
z-index: -1;
}
50% {
left: -705px;
opacity: 0;
z-index: -1;
}
92% {
left: -705px;
opacity: 0;
z-index: 0;
}
96% {
left: -705px;
opacity: 0;
}
100% {
left: 0px;
opacity: 1;
}
}
@-webkit-keyframes cycletwo {
0% {
left: -705px;
opacity: 0;
}
16% {
left: -705px;
opacity: 0;
}
20% {
left: 0px;
opacity: 1;
}
24% {
left: 0px;
opacity: 1;
}
36% {
left: 0px;
opacity: 1;
z-index: 0;
}
40% {
left: 705px;
opacity: 0;
z-index: 0;
}
41% {
left: -705px;
opacity: 0;
z-index: -1;
}
100% {
left: -705px;
opacity: 0;
z-index: -1;
}
}
@-webkit-keyframes cyclethree {
0% {
left: -705px;
opacity: 0;
}
36% {
left: -705px;
opacity: 0;
}
40% {
left: 0px;
opacity: 1;
}
44% {
left: 0px;
opacity: 1;
}
56% {
left: 0px;
opacity: 1;
z-index: 0;
}
60% {
left: 705px;
opacity: 0;
z-index: 0;
}
61% {
left: -705px;
opacity: 0;
z-index: -1;
}
100% {
left: -705px;
opacity: 0;
z-index: -1;
}
}
@-webkit-keyframes cyclefour {
0% {
left: -705px;
opacity: 0;
}
56% {
left: -705px;
opacity: 0;
}
60% {
left: 0px;
opacity: 1;
}
64% {
left: 0px;
opacity: 1;
}
76% {
left: 0px;
opacity: 1;
z-index: 0;
}
80% {
left: 705px;
opacity: 0;
z-index: 0;
}
81% {
left: -705px;
opacity: 0;
z-index: -1;
}
100% {
left: -705px;
opacity: 0;
z-index: -1;
}
}
@-webkit-keyframes cyclefive {
0% {
left: -705px;
opacity: 0;
}
76% {
left: -705px;
opacity: 0;
}
80% {
left: 0px;
opacity: 1;
}
84% {
left: 0px;
opacity: 1;
}
96% {
left: 0px;
opacity: 1;
z-index: 0;
}
100% {
left: 705px;
opacity: 0;
z-index: 0;
}
}
/*Imagens*/
.capa {
background-image: url(images/capa.png);
background-repeat: no-repeat;
background-size: contain;
width: 80%;
height: 80%;
margin: auto;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
/*Tipos de Letra*/
.sans {
font-family: sans;
font-size: 30px;
color: #727484
}
@font-face {
font-family: 'sans';
src: url('fonts/sans/OpenSans-Light-webfont.eot');
src: url('fonts/sans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sans/OpenSans-Light-webfont.woff') format('woff'), url('fonts/sans/OpenSans-Light-webfont.ttf') format('truetype'), url('fonts/sans/OpenSans-Light-webfont.svg') format('svg');
}<!DOCTYPE html html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfólio Ornelas</title>
<style type="text/css">
@import url("css/styles.css");
</style>
</head>
<body>
<!--Início de Header-->
<div class="header">
<div class="container">
<div class="nav">
<ul id="lista1">
<li><a href="index.html"><span class="sans">HOME</span></a>
</li>
<li><a href="quem_sou.html"><span class="sans">QUEM SOU</span></a>
</li>
<li><a href="portfolio.html"><span class="sans">PORTFÓLIO</span></a>
</li>
<li><a href="contactos.html"><span class="sans">CONTACTOS</span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Fim de Header-->
<!--Início de Slider-->
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<input type="radio" id="slide1" name="slide" checked>
<label for="slide1"></label>
<a href="#">
<img src="css/images/imagem1.png" width="700px" />
</a>
<div class="tooltip">
<h1 class="sans">CASCALHO E ORNELAS</h1>
</div>
</li>
<li id="second" class="secondanimation">
<input type="radio" id="slide2" name="slide" checked>
<label for="slide2"></label>
<a href="#">
<img src="css/images/imagem1.png" width="700px" />
</a>
<div class="tooltip">
<h1 class="sans">CASCALHO E ORNELAS</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<input type="radio" id="slide3" name="slide" checked>
<label for="slide3"></label>
<a href="#">
<img src="css/images/imagem1.png" width="700px" />
</a>
<div class="tooltip">
<h1 class="sans">CASCALHO E ORNELAS</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<input type="radio" id="slide4" name="slide" checked>
<label for="slide4"></label>
<a href="#">
<img src="css/images/imagem1.png" width="700px" />
</a>
<div class="tooltip">
<h1 class="sans">CASCALHO E ORNELAS</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<input type="radio" id="slide5" name="slide" checked>
<label for="slide5"></label>
<a href="#">
<img src="css/images/imagem1.png" width="700px" />
</a>
<div class="tooltip">
<h1 class="sans">CASCALHO E ORNELAS</h1>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--Fim de Slider-->
<!--Início de Gallery-->
<div class="container">
<div class="gallery">
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="224">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
<div class="img">
<a target="_blank" href="css/images/imagem1.png">
<img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
</a>
</div>
</div>
</div>
<!--Fim de Gallery-->
<!--Início de Footer-->
<div id="footer">
<div class="nav">
<div class="footer-logos">
<ul id="lista2">
<li>
<a href="https://www.facebook.com">
<img src="css/images/facebook.png" style="height:34px">
</a>
</li>
<li>
<a href="https://www.youtube.com">
<img src="css/images/youtube.png" style="height:34px">
</a>
</li>
<li>
<a href="https://www.google.com">
<img src="css/images/google.png" style="height:34px">
</a>
</li>
</ul>
</div>
</div>
</div>
<!--Fim de Footer-->
</body>
</html>
Id как чистый css: / –