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 trialPaul Jackson
8,943 PointsSlider 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
31,009 PointsThe 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
8,943 PointsWow... 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
31,009 PointsThanks man have good day. :)