28172 sujets

CSS et mise en forme, CSS3

[Résolu] BESOIN D'AIDE SVP

Bonjour à tous !
Je suis étudiante qui pratique un peu l'html et le CSS, vraiment les bases. J'ai déjà créé un site en simulation, mais voilà, je ne suis pas experte non plus. Je connais la responsive mais SOIT, ce n'est pas ça la question. Smiley smile

J'aurai besoin de votre aide si vous le voulez bien.
J'aimerais connaître le code (HTML et CSS) de cette image ci-dessous, ça serait sympa, car je m'y perd un peu. J'espère que vous verrez malgré la petite taille exigée..

upload/1490203158-64760-2.jpg

De plus, si ce n'est pas de trop, je dois également faire en sorte que ceci soit un slideshow que vous pouvez voir sur ce lien. Comment dois-je faire ?
http://www.thepetedesign.com/demos/immersive_slider_demo.html
Merci de votre aide !

C'est assez urgent. Smiley ohwell
Modifié par Seizenka (23 Mar 2017 - 11:19)
Si j'ai bien compris tu veux mettre un slide show sur ton site?

Il faut un peu coder : j'ai fait une petite page avec un slide show fait maison.

Si tu connais un peu javascript tu arriveras a le comprendre et à l'adapter exactement à ton besoin, sinon il y des hébergeurs de site avec des éditeurs en ligne très bien ...

Bonne soirée


<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <style>
            .flou {
                -webkit-filter: blur(5px);
                -moz-filter: blur(5px);
                -o-filter: blur(5px);
                -ms-filter: blur(5px);

                filter: blur(5px);
            }
            .photos {
                position: absolute;
            }
            .sur-image { 
                position: absolute;
                left: 30%;
                top: 30%;
                width: 320px;
                height: 240px;
            }
            .commentaire {
                position: absolute;
                left: 10%;
                top: 30%;
                z-index: 1;
                color: black;
                font-size: 2em;
                font-weight: bold;
            }
            .slider {
                display: inline-block;
            }
            .fleche {
                position: relative;
                background: rgba(0,0,0,0.5);
                z-index: 2;
                border: none;
            }
            .gauche {
                left: 10px;
                top: 250px;
            }
            .droite {
                left: 570px;
                top: 250px;
            }
            .bandeau {
                position: absolute;
                left:20%;
                top: 20%;
                width: 640px;
            }
            #p1 {
                display: none;
            }
            #p3 {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class='bandeau'>
            <div class='slider'>
                <button class='fleche gauche'>&leftarrow;</button>
                <button class='fleche droite'>&rightarrow;</button>
                <div id="p1" class='photos'>
                    <div class='commentaire'>
                        Photo 1
                    </div>
                    <img class='flou' src="images/photo1.jpg" >
                    <img class='sur-image' src="images/photo1.jpg" >
                </div>
                <div id="p2" class='photos'>
                    <div class='commentaire'>
                        Photo 2
                    </div>
                    <img class='flou' src="images/photo2.jpg" >
                    <img class='sur-image' src="images/photo2.jpg" >
                </div>
                <div id="p3" class='photos'>
                    <div class='commentaire'>
                        Photo 3
                    </div>
                    <img class='flou' src="images/photo3.jpg" >
                    <img class='sur-image' src="images/photo3.jpg" >
                </div>
            </div>
        </div>
        <script>
            var image=2;
            $(".gauche").click( function() {
                if (image>1) {
                    slideGauche(image);
                    image--;
                    slideDroite(image);
                }
            });
            $(".droite").click( function() {
                if (image<3) {
                    slideDroite(image);
                    image++;
                    slideGauche(image);
                }
            });
            function slideDroite(image) {
                $("#p"+image).toggle("slide",{ direction: "right" });
            }
            function slideGauche(image) {
                $("#p"+image).toggle("slide",{ direction: "left" });
            }

        </script>
    </body>
</html>
Meilleure solution
Sujet clos
Aller à