Quiero poner un reloj por encima del slideshow en la esquina superior derecha.
tengo el siguiente diseño donde cargo las imagenes desde una carpeta pero el problema es que el reloj se queda pegado en la primer imagen del slideshow y en el resto solo se quedan los separadores de horas y minutos(osea : :).
Esta es la primer imagen del slideshow y se muestra asi el reloj, yo lo que quiero es que ente dentro del div en color negro ypor ensima de todas las imagenes.
De la segunda imagen en adelante solo se muestra asi:
Este es mi diseño:
<!DOCTYPE html>
<html>
<head>
<title>slideshow</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<?php
$files = scandir("img/");
?>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$a=0;
for ($i=2; $i < count($files) ; $i++):
?>
<div id="dynamicImg" class="item <?php echo $a == 0 ? 'active' : ''; ?>">
<img src="img/<?php echo $files[$i]; ?>" alt="Los Angeles" style="width:100%;">
<!--Reloj -->
<div class="wrap">
<div class="widget">
<div class="reloj">
<p id="horas" class="horas"></p>
<p>:</p>
<p id="minutos" class="minutos"></p>
<p>:</p>
<div class="caja-segundos">
<p id="ampm" class="ampm"></p>
<p id="segundos" class="segundos"></p>
</div>
</div>
</div>
</div>
</div>
<?php
$a++;
endfor;
?>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
Este es el css:
{
margin: 0;
padding: 0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
.container, #myCarousel,
.carousel-inner{
position: relative;
}
.wrap{
position: absolute;
width:50%;
top: 0;
right: 0;
left: 70%;
margin: 0, auto;
max-width: 1000px;
/*margin:auto;*/
}
.widget{
position: absolute;
width: 60%;
margin: 0;
}
.widget p{
display: inline-block;
line-height: 1em;
}
.reloj{
position: absolute;
font-family: 'Oswald', sans-serif;
width: 100%;
height: 70px;
padding: 5%;
top: 5%;
font-size: 6em;
text-align: center;
background:rgb(0,0,0,5);
}
.reloj .caja-segundos{
display: inline-block;
}
.reloj .segundos,
.reloj .ampm{
font-size: 2rem;
display: block;
}
En general solo quiero mostrar el slideshow y las imagenes para que se vean completas o se adapten para verse completas en la pantalla y semuestre la hora en la esquina superios derecha, pero no soy bueno con css, espero me puedan ayudar :)
Saludos.