Adapter mon slider à l'ecran html/css

Messages postés
16
Date d'inscription
mardi 10 juillet 2018
Dernière intervention
1 janvier 2019
-
Je viens de creer un slider et je souhaite le mettre de façon à ce que chaque slide prenne tout l'écran. le problème c'est que sur la longueur c'est parfait mais sur la largeur il y a , je dirais à peut près 25% de l'écran non occupé. Pourriez-vous m'aider ?

voici mon code source:

INDEX.HTML
</html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <slider>
            <slide><p>slide 1</p></slide>
            <slide><p>slide 2</p></slide>
            <slide><p>slide 3</p></slide>
            <slide><p>slide 4 </p></slide>
        </slider>
    </body>
</html>


STYLE.CSS
html, body{
    width:100%;
    height: 100%;
    padding: 0;
    margin: 0px;
} 

slider{
    display: block;
   1F1F1F;
    width: 100%;
    height: 100%;
    background-color: ;
    overflow: hidden;
    position: absolute;
}

slider > * {
    position: absolute;
    display: block;
    width: 100%;
    background: ;
    animation: slide 12s infinite;
    overflow: hidden;
}


slide:nth-child(1){
    left: 0%;
    animation-delay: -1s;
    background-image: url(1.jpg);
    background-size: cover;
    background-position: center;
}


slide:nth-child(2){
    animation-delay: 2s;
    background-image: url(2.jpg);
    background-size: cover;
    background-position: center;
}

slide:nth-child(3){
    animation-delay: 5s;
    background-image: url(3.jpg);
    background-size: cover;
    background-position: center;
}

slide:nth-child(4){
    left: 0%;
    animation-delay: 8s;
    background-image: url(4.jpg);
    background-size: cover;
    background-position: center;
}


slide p {
    font-family: comfortaa;
    font-size:70px;
    text-align:center;
    display:inline-block;
    width:100%;
    margin-top:340px;
    color:#fff;
}

@keyframes slide{
    0% {left:100%;width: 100%}
    5% {left:0%;}
    25%{left:0%;}
    30%{left:-100%; width:100%;}
    30.0001%{left:-100%; width:0%;}
    100%{left:100%; width:0%;}
}
Afficher la suite 

Votre réponse

1 réponse

Messages postés
1665
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
4 janvier 2019
34
0
Merci
bonjour

a tu essayé en mettant margin padding et border a zero pour slider

rien ne sert de courir il faut partir a point.
cours Forest cours !
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.