Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by mariettagordon
mariettagordon
4,428 Points

Workshop by David Conner: Create a fullscreen slider with CSS not working

I just watched the video with David Conner: Create a Fullscreen Slider with CSS and it isn't working for me. I typed out the code as I was watching the video so I'm a bit confused. The only thing I changed was that I used my own images and made three slides instead of four. When I load my page in a browser the images do not show up. My code is below:

The HTML

<!DOCTYPE html>
<html>
<head>
<title>Slider Test 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/slider2.css">

</head>

<body>

    <div class="wrap">

        <header>
            <label for="slide-1-trigger">Slide One</label>
            <label for="slide-2-trigger">Slide Two</label>
            <label for="slide-3-trigger">Slide Three</label>
        </header>

        <input id="slide-1-trigger" type="radio" name="slides" checked>
        <section class="slide slide-one">
            <h1>Headline One</h1>
        </section>
        <input id="slide-2-trigger" type="radio" name="slides">
        <section class="slide slide-two">
            <h1>Headline Two</h1>
        </section>
        <input id="slide-3-trigger" type="radio" name="slides">
        <section class="slide slide-three">
            <h1>Headline Three</h1>
        </section>

    </div>

</body>

</html>

The CSS

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrap {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #120103;
    color: #fff;
    text-align: center;
}

header {
    background: #3e474f;
    box-shadow: 0 .5em 1em #111;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
}

header label {
    color: #788188;
    cursor: pointer;
    display: inline-block;
    line-height: 4.25em;
    font-size: .667em;
    font-weight: bold;
    padding: 0 1em;
}

header label:hover {
    background: #2e353b;
}

.slide {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10;
    padding: 8em 1em 0;
    background-color: #120103;
    background-position: 50% 50%;
    background-size: cover;
}

.slide-one { background-image: url('../images/slide1.jpg'); }
.slide-two { background-image: url('../images/slide2.jpg'); }
.slide-three { background-image: url('../images/slide3.jpg'); }

[id^="slide"]:checked + slide {
    left: 0;
    z-index: 100;
}

Any help would be appreciated. Also I was wondering if someone might be able to help me figure out how to make these slides switch on there own as well as having the option to use the buttons. I know it can be done with just CSS I just can't figure out how.

1 Answer

Michael Peterman
Michael Peterman
19,087 Points
Michael Peterman
Michael Peterman
19,087 Points

Hey there, I haven't watched the workshop so I'm not sure what was covered exactly, but I did notice something in the code you posted. Looks like you might be missing a period before the slide class in this rule: [id^="slide"]:checked + slide { left: 0; z-index: 100; } I copied your code over (and changed the image paths for testing). I think if you add a period before "slide" in that last rule you should be all set - checkout this codepen http://codepen.io/michaelkpeterman/pen/GoyeRP?editors=1100. Hope this helps.

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Good eye.