HTML - Crear carrusel con html y css

 
Vista:
Imágen de perfil de Geraldine
Val: 3
Ha aumentado su posición en 18 puestos en HTML (en relación al último mes)
Gráfica de HTML

Crear carrusel con html y css

Publicado por Geraldine (1 intervención) el 22/04/2019 22:10:41
Hola compañeros! Resulta que estoy haciendo un carrusel de vídeos, pero el problema esta en que los botones laterales no me están funcionando e hice todo lo que en este vídeo se ve

Quisiera saber que puedo hacer para que me mande al otro vídeo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Carusel de videos</title>
	<!--Llamamos a la hoja de estilo-->
	<link href="Caruselvideos.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="video">
 
		<div class="slide_video" id="uno">
			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/3JSQVYhNcRs" frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
		<!--Creamos los botones laterales-->
		<label for="i3" class="anterior"></label>
		<label for="i2" class="siguiente"></label>
 
		</div><!--Fin div1-->
 
		<div class="slide_video" id="dos">
			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/lVKbF8khsrI" frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
		<!--Creamos los botones laterales-->
		<label for="i1" class="anterior"></label>
		<label for="i3" class="siguiente"></label>
 
		</div><!--Fin div2-->
 
		<div class="slide_video" id="tres">
			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/PXYeARRyDWk" frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
		<!--Creamos los botones laterales-->
		<label for="i2" class="anterior"></label>
		<label for="i1" class="siguiente"></label>
 
		</div><!--Fin div3-->
 
	</div><!--Fin clase video-->
 
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
html, body{
width: 100%;
height: 100%;
margin: 0;
}
 
.video{
margin: 0 auto;
margin-top: 20px;
position: relative;
width: 70%;
height: 0;
padding-bottom: 40%;
background: #4c4c4c;
border: solid 10px #2c2c2c;
}
 
.slide_video{
	position: absolute;
	width: 100%;
	height: 100%;
}
 
.slide_video video{
	width: 100%;
	height: 100%;
}
 
.anterior, .siguiente{
	width: 12%;
	height: 100%;
	position: absolute;
	top: 0;
	background-color: rgb(88,88,88,.4);
	z-index: 99;
	cursor: pointer;
}
 
.anterior{
	left: 0;
}
 
.siguiente{
	right: 0;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder