Forum : Fullscreen slideshow

Bonjour,

Je débute en développement Web et tout ce qui touche aux langages HTML/CSS/Javascript.
J'utilise Materialize et j'aimerais agencer ma page web comme suit : une navbar, un fullscreen slideshow, et en dessous le contenu.
Un peu comme sur le site de Google Drive, sauf que là, c'est juste une image plein écran (pas de slideshow) et il y a en plus le parallax.
Du coup, j'ai un code pour ma navbar et mon fullscreen slideshow, mais le rendu n'est pas le bon : le slideshow "avale" le contenu de la page qui suit. En fait, je me suis rendu compte que ce contenu est derrière le slideshow (donc il est masqué).
J'espère avoir été clair..

Comment faire ?

Merci d'avance.

pruneau

Auteur

Réponse acceptée

Bonsoir,

Merci pour toutes vos réponses. J'ai réussi à trouver une solution grâce à ce tuto !

MrCastor

Salut,
Peux-tu nous montrer ton code stp ?
Ajoute un display: block sur ton slideshow. (Ce n'est peut-être pas ça mais sans le code, je ne peux rien faire)

pruneau

Auteur

Bonsoir,

Merci d'avoir répondu, et désolé pour ce long temps de réponse de ma part, avec la reprise des cours, j'ai peu de temps pour me consacrer à ça..

J'ai essayé le display: block sur le slideshow mais sans succès.

Voici le code HTML :

<body>
        <div class="navbar-fixed">
            <nav class="red lighten-5" role="navigation">
                <div class="nav-wrapper container"><a id="logo-container" href="./accueil.html" class="brand-logo"><img src="images/logo2.png" width="250" height="59.16"></a>
                    <ul class="right hide-on-med-and-down">
                        <li class="active"><a href="#" class="noir"><b>Accueil</b></a></li>
                        <li><a href="./socio-esthetique.html" class="noir">Socio-esthétique</a></li>
                        <li><a href="./projet.html" class="noir">Projet</a></li>
                        <li><a href="./prestations.html" class="noir">Prestations</a></li>
                    </ul>

                    <ul id="nav-mobile" class="side-nav">
                        <li><a href="#accueil" class="noir">Accueil</a></li>
                        <li><a href="./socio-esthetique.html" class="noir">Socio-esthétique</a></li>
                        <li><a href="./projet.html" class="noir">Projet</a></li>
                        <li><a href="./prestations.html" class="noir">Prestations</a></li>
                        </ul>
                    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
                </div>
            </nav>
        </div>

        <div class="fullscreen slider">
            <ul class="slides">
                <li> <img class="position_top" src="images/image1.jpg"></li>
                <li> <img class="position_bottom" src="images/image2.jpg"></li>
                <li> <img class="position_bottom" src="images/image3.jpg"></li>
            </ul>
        </div>

        <div class="container">
        ...

Et voici le code CSS :

.lettre {
    color:#FF9999;
}

.brand-logo {
    font-family: 'Oregano', cursive;
}

.noir {
    color:#222226;
}

.right hide-on-med-and-down {
    color:#222226;
}

.side-nav{
    background-color:#ffebee;
}

.slider .indicators .indicator-item.active{
    background-color:#FF9999;

    }

.slider .indicators .indicator-item{
    border:1px solid #222226;
    color:white;
    }

.slider .indicators {
    bottom:50px;
    z-index:100;
    }

p{
    text-align:center;
    }

.container{
    color:#222226;
    }

.slider .slides li img.position_bottom  {
    background-position: center bottom;
    }

.slider .slides li img.position_top  {
    background-position: center top;
    }

.slider.fullscreen{
    display: block;
    }

macinsteph

Bonsoir,

as tu testé supersized je pense que tu peux trouver ton bonheur.

MrCastor

.slider.fullscreen {
    float: left;
    width: 100%;
    heigh: 100vh;
    background: url('ton images') no-repeat;
    background-position: cover;
}

Pour réaliser ton slideshow, je te conseille owlcaroussel ou encore bxslider :)

Fullscreen slideshow

5 réponses