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.
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
0