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 Create a Fullscreen Slider with CSS

Posted by Paul Jackson
Paul Jackson
8,943 Points

Slider not functioning correctly

It seems as if I have my code lined up exactly like the video. The slides work correctly when going from slide 1 to 2 to 3 but not if going down from 3 to 2 or 2 to 1, etc.

Someone help please?

My Code:

<div class="slideWrap">
                <header>
                    <label for="slide1Trigger">Slide One</label>
                    <label for="slide2Trigger">Slide Two</label>
                    <label for="slide3Trigger">Slide Three</label>
                </header>


                <input id="slide1Trigger" type="radio" name="slides" checked>
                    <section class="slide slideOne">
                        <h1>Headline One</h1>
                    </section>
                <input id="slide2Trigger" type="radio" name="slides">
                    <section class="slide slideTwo">
                        <h1>Headline Two</h1>
                    </section>
                <input id="slide3Trigger" type="radio" name="slides">
                    <section class="slide slideThree">
                        <h1>Headline Three</h1>
                    </section> 
            </div>

.slideWrap {
    font-family: 'Teko', sans-serif;
    height: 100%;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.slide h1 {
    margin: 0px auto;
    width: 150px;
    background: rgba( 255, 255, 255, 0.3 );
}

.slideWrap header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    background: black;
}

.slideWrap header label {
    color: white;
    cursor: pointer;
    display: inline-block;
    margin: 0px 1em;
    padding: 2px 0px;
    line-height: 1.25em;
    font-size: 1.2em;
    -webkit-transition: color 200ms ease-out .05s;
    -moz-transition: color 200ms ease-out .05s;
    -o-transition: color 200ms ease-out .05s;
    transition: color 200ms ease-out .05s;
}

.slideWrap header label:hover {
    color: #ff7600;
}

.slide {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10;
    padding: 8em 1em 0;
    background: #ff7600 no-repeat center;
    background-size: cover;
    transition: left 0s .75s;
}

.slideOne { background-image: url("../img/harley1.png"); }

.slideTwo { background-image: url("../img/harley2.png"); }

.slideThree { background-image: url("../img/harley3.png"); }

[id^="slide"]:checked + .slide {
    left: 0;
    z-index 100;
    transition: left .65s ease-out;
}

2 Answers

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

The source is below so you can compare from code pen.

http://codepen.io/davidicus/pen/pvObpV

If not just uh copy and paste. Change the pictures and colors out.

Paul Jackson
Paul Jackson
8,943 Points
Paul Jackson
Paul Jackson
8,943 Points

Wow... I was literally only missing the colon on the z-index of the :checked + .slide

lol the power of CSS. Thanks jason chan

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

Thanks man have good day. :)