Não estou conseguindo faze o slider com html e css
08/12/2020
0
Não estou conseguindo faze o slider com html e css, segue abaixo meu código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul class="slider">
<li>
<input type="radio" id="slide1" name="slide" checked>
<label for="slide1"></label>
<img src="caro-watson.jpeg"/>
</li>
<li>
<input type="radio" id="slide2" name="slide">
<label for="slide2"></label>
<img src="blend.jpeg"/>
</li>
<li>
<input type="radio" id="slide3" name="slide">
<label for="slide3"></label>
<img src="olivas.jpeg"/>
</li>
</ul>
</body>
</html>
* { margin: 0; padding: 0; }
.slider {
display: block;
height: 293px;
width: 600px;
margin: auto;
margin-top: 20px;
position: relative;
}
.slider li {
list-style: none;
position: absolute;
}
.slider img {
margin: auto;
height: 100%;
width: 100%;
vertical-align: top;
}
.slider input {
display: none;
}
.slider label {
background-color: #000;
bottom: 10px;
cursor: pointer;
display: block;
height: 10px;
position: absolute;
width: 10px;
z-index: 10;
}
.slider li:nth-child(1) label {
left: 10px;
}
.slider li:nth-child(2) label {
left: 40px;
}
.slider li:nth-child(3) label {
left: 70px;
}
.slider img {
opacity: 0;
visibility: hidden;
}
.slider li input:checked ~ img {
opacity: 1;
visibility: visible;
z-index: 10;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul class="slider">
<li>
<input type="radio" id="slide1" name="slide" checked>
<label for="slide1"></label>
<img src="caro-watson.jpeg"/>
</li>
<li>
<input type="radio" id="slide2" name="slide">
<label for="slide2"></label>
<img src="blend.jpeg"/>
</li>
<li>
<input type="radio" id="slide3" name="slide">
<label for="slide3"></label>
<img src="olivas.jpeg"/>
</li>
</ul>
</body>
</html>
* { margin: 0; padding: 0; }
.slider {
display: block;
height: 293px;
width: 600px;
margin: auto;
margin-top: 20px;
position: relative;
}
.slider li {
list-style: none;
position: absolute;
}
.slider img {
margin: auto;
height: 100%;
width: 100%;
vertical-align: top;
}
.slider input {
display: none;
}
.slider label {
background-color: #000;
bottom: 10px;
cursor: pointer;
display: block;
height: 10px;
position: absolute;
width: 10px;
z-index: 10;
}
.slider li:nth-child(1) label {
left: 10px;
}
.slider li:nth-child(2) label {
left: 40px;
}
.slider li:nth-child(3) label {
left: 70px;
}
.slider img {
opacity: 0;
visibility: hidden;
}
.slider li input:checked ~ img {
opacity: 1;
visibility: visible;
z-index: 10;
}
Gustavo Knack
Curtir tópico
+ 0
Responder
Posts
08/12/2020
Nomad
Observei que fez seguindo um artigo da DevMedia mesmo... Especifique o que acontece exatamente, pois reproduzindo o código parece estar de acordo.
Responder
08/12/2020
Gustavo Knack
Observei que fez seguindo um artigo da DevMedia mesmo... Especifique o que acontece exatamente, pois reproduzindo o código parece estar de acordo.
Não consigo explicar, tirei um print da tela, mas não tem como colocar print aqui né.. não aparecem as flechas para passar para o outro slide, apenas alguns pontos pretos na tela que quando clico neles passam os slides
Responder
Clique aqui para fazer login e interagir na Comunidade :)