28111 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en forme d'un slider en CSS

Bonjour,

Après plus de 15 ans j'ai décidé de me remettre a niveau en CSS et HTML par la réalisation d'un site web perso (site en une page et responsive design) que je souhaite utiliser comme portfolio en tant que chercheur en biologie.

Je souhaite intégrer a mon site un slider horizontal avec bouton afin de présenter mes compétences en biologie. J'ai trouve mon bonheur avec ce code et je souhaite l’intégrer a mon site.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="MyGridSlider - SVG.css">
    <title>GridSlider</title>
</head>
<body>

    <input type="radio" id="trigger1" name="slider" checked autofocus>
    <label for="trigger1"></label>
    <div class="slide bg1"> Box 1</div>

    <input type="radio" id="trigger2" name="slider">
    <label for="trigger2"></label>
    <div class="slide bg2"> Box 2</div>

    <input type="radio" id="trigger3" name="slider">
    <label for="trigger3"></label>
    <div class="slide bg3"></div>

    <input type="radio" id="trigger4" name="slider">
    <label for="trigger4"></label>
    <div class="slide bg4"></div>

    <input type="radio" id="trigger5" name="slider">
    <label for="trigger5"></label>
    <div class="slide bg5">Box 5</div>
    
</body>
</html>




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}

input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

label {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid white;
    border-radius: 999px;
    background-color: transparent;
    margin: 95vh 6px 0 6px ;
    z-index: 2;
    cursor: pointer;
    transition-duration: .4s;
}

.slide {
    position: absolute;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 102vh;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translateX(-100%);
    transition-duration: .4s;
    opacity: 1;
    *filter: grayscale(); /* Need to deactivate to see background color */
}

.bg1 {
    background: limegreen;
}

.bg2 {
    background-color: mediumaquamarine;
}

.bg3 {
    background-color: magenta;
}

.bg4 {
    background-color: orange;
}

.bg5 {
    background-color: peru;
}

input:checked+label {
    background-color: white;
}

input:focus+label {
    box-shadow: 0 0 0 2px teal, 0 0 18px white;
}

input:checked~.slide {
    transform: translateX(100%);
}

 input:checked+label+.slide {
    transform: translateX(0);
    opacity: 1;
 }


Après plusieurs tentatives, je n'y arrive malheureusement pas.
J'ai réalisé mon site en utilisant le "display grid" système et j'ai toujours eu un peu de mal avec le positionnement relative/absolute.

Voici un court exemple de mon code actuel. J'utilise les couleurs dans mon code car cela m'est plus facile pour visualiser. Je souhaite donc integrer ce slider en css entre deux div (type grid). Cela devrait pouvoir se fairer sans soucis mais c'est encore impossible pour moi dans letat actuel de mes connaissances.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="MyGridSliderSandbox.css">
    <title>Building my slider</title>
</head>
<body>

    <header>
        <div class="NavBar">
            My beautiful nav-bar
        </div>
    </header>

    <main>

    <div class="AboutMe">
        About Me...
    </div>

    <div class="MySkills">

        <input type="radio" id="trigger1" name="slider" checked autofocus>
        <label for="trigger1"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    My Pic 1
                </div>

                <div class="SkillText">
                    <h1>Title Box 1</h1>
                </div>
            </div>

        </div>

        <input type="radio" id="trigger2" name="slider">
        <label for="trigger2"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    Pic 2
                </div>

                <div class="SkillText">
                    <h1>Title Box 2</h1>
                </div>
            </div>

        </div>

        <input type="radio" id="trigger3" name="slider">
        <label for="trigger3"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    Pic 3
                </div>

                <div class="SkillText">
                    <h1>Title Box 3</h1>
                </div>
            </div>

        </div>

        <input type="radio" id="trigger4" name="slider">
        <label for="trigger4"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    Pic 4
                </div>

                <div class="SkillText">
                    <h1>Title Box 4</h1>
                </div>
            </div>

        </div>

        <input type="radio" id="trigger5" name="slider">
        <label for="trigger5"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    Pic 5
                </div>

                <div class="SkillText">
                    <h1>Title Box 5</h1>
                </div>
            </div>

        </div>

        <input type="radio" id="trigger6" name="slider">
        <label for="trigger6"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    Pic 6
                </div>

                <div class="SkillText">
                    <h1>Title Box 6</h1>
                </div>
            </div>

        </div>

    </div>

    <div class="ContactMe">
        Contact Me by email...
    </div>

    </main>

    <footer>
        <div class="Footer">
            My amazing footer
        </div>
    </footer>
    
</body>
</html>




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    *height: 100vh;
    text-align: center;
    overflow-x: hidden; /* was initially overflow: hidden */
    background-color: darkgoldenrod;
}

main {
    
}

.Myskills {
    *display: grid;
    position: relative;
}



input {
    position: absolute; /* was initially absolute */
    opacity: 0;
    cursor: pointer;

}

/* Design of the radio buttons */
label {
    display: inline-block;
    width: 35px;
    height: 35px;
    border: 2px solid blue; /* Color of the radio button border */
    border-radius: 999px;
    background-color: transparent;
    margin: 75vh 20px 0 20px ; /* To adapt later */
    *z-index: 2; /* Initial working setting: z-index: 2 */
    cursor: pointer;
    transition-duration: .4s;
}

.SlideSkill {
    position: absolute;
    *background-position: center;
    *background-size: cover;
    width: 100%;
    height: 65vh; /* Was initially 102vh */
    top: 0;
    left: 0;
    z-index: -1; /* Initial working setting: z-index: -1 */
    transform: translateX(-100%);
    transition-duration: .4s;
    *opacity: 1;
    background-color: gray;
}

/* Color inside the selected radio button */
input:checked+label {
    background-color: transparent;
}

/* Design of the small radio button when selected */
input:focus+label {
    box-shadow: 0 0 0 2px teal, 0 0 18px white;
}

input:checked~.SlideSkill {
    transform: translateX(100%);
}

input:checked+label+.SlideSkill {
    transform: translateX(0);
    opacity: 1;
}



.Skill {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    background-color: gray;
}

.SkillPic {
    border: 1px solid yellow;
    padding: 50px;
}

.SkillText {
    border: 1px solid red;
    background-color: white;
}

.SkillText h1 {
    font-size: 40px;
}





.NavBar {
    background-color: palevioletred;
    font-size: 25px;
    text-align: left;
    height: 80px;
}

.AboutMe {
    display: grid;
    background-color: blueviolet;
    height: 130px;
}

.ContactMe {
    display: grid;
    background-color: darkcyan;
    height: 50vh;
    padding: 50px;
}

.Footer {
    background-color: coral;
    height: 80px;
}


Merci d'avance pour votre aide.
Modifié par fgaaschtt (24 May 2022 - 15:53)
Bonjour,

J'ai recopié ton code pour tester .. et reviendrai vers toi..
Mais déjà petite interrogation :

body {
    width: 100%;
    *height: 100vh;

.Myskills {
    *display: grid;

Cet asterisque est là par erreur ou volontairement?
Salut cpalo,

cpalo a écrit :
Bonjour,

J'ai recopié ton code pour tester .. et reviendrai vers toi..
Mais déjà petite interrogation :

body {
    width: 100%;
    *height: 100vh;

.Myskills {
    *display: grid;

Cet asterisque est là par erreur ou volontairement?


Merci pour ton aide. Les astérisques m'aident a inactiver certaines parties de mon code pour la créations de mes pages car je suis débutant.

Après relecture, mon code fonctionne mais une erreur (majuscule) s'est glissée dedans:


.Myskills {
    *display: grid;
    position: relative;
}


Code après correction:


.MySkills {
    *display: grid;
    position: relative;
}

Modifié par fgaaschtt (24 May 2022 - 15:53)
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à