Help for integration of a CSS slider into a website

HTML & CSS
1

Hi,

After more than 15 years, I recently decided to up-date my basic HTML and CSS skills by the creation of a personal website that I would like to use as portfolio as molecular biologist.

On my one-page website, I would like to integrate an horizontal CSS slider with radio buttons to present my different professional skills so I don’t have a too long website. I found this code that matches my expectations via a YouTube tutorial and I would like to integrate it into my website that I bought using mostly display grid.

<!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;
 }

As I mentioned, my coding skills are quite basic and I could not success after many attempts. I designed my website using display grid system and using absolute/relative positioning have always been difficult for me.
Here is a short representative example of what I want to create. I want to integrate this CSS slider between 2 divs created by display grid. I don’t think it is impossible to do (and probably easy to do) but my current knowledge are too low for me to success.

I use background colors and borders for a better visualization.

<!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;
}

I also create a CodePen Project .

Thank you in advance,

2

For the absolute element you need a reference point of position:relative on MySkills.

i.e.

.MySkills{position:relative;}

That will get your elements visible so you can finish styling them.

Edit: Actually you have position:relative but you have a typo. You missed the capital S.

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

It should be:


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

I avoid camelCase in CSS and use all lower case and use a hyphen instead. I just find it easier to spot typos that way.

1 Like
3

Hi PaulOB,

Thank you for your help, it solved the problem!

I feel so stupid about the typo.
Thanks also for your recommendation about hyphen, I am going to use it.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.