Adapter mon slider à l'ecran html/css

Messages postés
16
Date d'inscription
mardi 10 juillet 2018
Statut
Membre
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 

1 réponse

Messages postés
1716
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
22 septembre 2019
47
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