Não estou conseguindo faze o slider com html e css

08/12/2020

8

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;
}
Responder

Posts

08/12/2020

Prospect

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

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar