3

Tengo un slider hecho solo con html y css. Las imágenes se mueven correctamente pero el texto relacionado con cada una de ellas no. Aparece uno encima de otro superpuesto y sin animación. En cada "diapositiva" debería haber una imagen y el texto relacionado encima.

Sé que el problema está con la clase encima y el position:absolute, pero si no, no consigo darle una posición fija con respecto a el div "banerosoa". Estoy intentando convertir un simple destacado en un slider y se me esta yendo de las manos. Solicito un alma caritativa.

El código es el siguiente: (creo que no me dejo nada sin meter en el post)

El html lleva bootstrap y poco mas

<section id="banner">
    <style type="text/css">
        .slider {
            width: 100%;
            margin: auto;
            overflow: hidden;
        }
        .slider ul {
            display: flex;
            padding: 0;
            width: 400%;
            animation: cambio 20s infinite alternate linear;
        }
        .slider li {
            width: 100%;
            list-style: none;
        }
        .slider img {
            width: 100%;
        }
        @keyframes cambio {
            0% {margin-left: 0;}
            20% {margin-left: 0;}
            25% {margin-left: -100%;}
            45% {margin-left: -100%;}
            50% {margin-left: -200%;}
            70% {margin-left: -200%;}
            75% {margin-left: -300%;}
            100% {margin-left: -300%;}
        }
    </style>
    <div class="slider">
        <ul>
            <li>
                @php
                    $destacado = $destacadok[0];
                @endphp
                    <div class="col-lg-12 banerosoa" style="background-image: url(/img/imagen1.jpg); background-size: cover; background-position: center;"></div>
                <div class="col-lg-12 encima">
                    <a href="/es/noticia/{{$destacado->sluges}}"><h2>Noticia1</h2></a>
                    <h5>redactor1</h5>
                </div>
            </li>
            <li>
                @php
                    $destacado = $destacadok[1];
                @endphp
                    <div class="col-lg-12 banerosoa" style="background-image: url(/img/imagen1.jpg); background-size: cover; background-position: center;"></div>
                <div class="col-lg-12 encima">
                    <a href="/es/noticia/{{$destacado->sluges}}"><h2>Noticia1</h2></a>
                    <h5>redactor1</h5>
                </div>
            </li>
            <li>
                @php
                    $destacado = $destacadok[2];
                @endphp
                    <div class="col-lg-12 banerosoa" style="background-image: url(/img/imagen1.jpg); background-size: cover; background-position: center;"></div>
                <div class="col-lg-12 encima">
                    <a href="/es/noticia/{{$destacado->sluges}}"><h2>Noticia1</h2></a>
                    <h5>redactor1</h5>
                </div>
            </li>
            <li>
                @php
                    $destacado = $destacadok[3];
                @endphp
                    <div class="col-lg-12 banerosoa" style="background-image: url(/img/imagen1.jpg); background-size: cover; background-position: center;"></div>
                <div class="col-lg-12 encima">
                    <a href="/es/noticia/{{$destacado->sluges}}"><h2>Noticia1</h2></a>
                    <h5>redactor1</h5>
                </div>
            </li>
        </ul>
    </div>
</section>

Y el css restante es este:

.encima{
    position: absolute;
    width: 75%;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
    color:#fff !important;
}

.encima a{
    color:#fff;
}

.banerosoa{
    width:100%;
    height:650px;
    overflow: hidden;
    padding: 0px;
}

1 respuesta 1

3

El problema lo tienes en el position: absolute que le has dado al elemento .encima, como bien has determinado.

Un elemento con position: absolute se posiciona respecto al primer ancestro que se encuentre con position: relative. De no encontrar ninguno tomará los límites que le de el layout del dispositivo donde se visualice.

Sin poder reproducir tu código te diría que la solución la tienes en dar al elemento .banerosoa un position: relative para que el texto se posicione respecto al <div> que lo contiene para que al moverse este, le acompañe.

.banerosoa{
    width:100%;
    height:650px;
    overflow: hidden;
    padding: 0px;
    position: relative;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.