Sujet Précédent Sujet Suivant

Adapter mon slider à l'ecran html/css

leon237 Messages postés 16 Date d'inscription mardi 10 juillet 2018 Statut Membre Dernière intervention 1 janvier 2019 - Modifié le 1 janv. 2019 à 14:09
@karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023 - 4 janv. 2019 à 17:57
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%;}
}

1 réponse

Réponse 1 / 1
@karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023 146
Modifié le 4 janv. 2019 à 17:58
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 !
0
Rejoignez-nous