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

General Discussion Create a Fullscreen Slider with CSS

Posted by Rana Dugal
Rana Dugal
9,506 Points

I have practically copied the slider from the slider course as Slider-1 on my workspace. I cannot get it to work.

<!doctype html> <html lang="en"> <head> <title>Louisville</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/horizontal.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>
        <label for="slide-4-trigger">Slide Four</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>
      <input id="slide-3-trigger" type="radio" name="slides">
      <section class="slide slide-four">
       <h1>Headline Four</h1>
      <section>

  </div>

</body> </html>

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 13m #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/autumn-219972_1280.jpg'); } .slide-two { background-image: url('../images/road-1072823_1920.jpg'); } .slide-three { background-image: url('images/scotland-1761292_1920.jpg'); } .slide-four { background-image: url('../images/download1.jpeg'); }

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

4 Answers

Steven Parker
Steven Parker
231,184 Points
Steven Parker
Steven Parker
231,184 Points

There's a syntax issue in the "section" tags:

      <section class="slide slide-one">
        <h1>Headline One</h1>
      <section>    <!-- this should be a CLOSING tag: </section> (note the slash!) -->

Also, there are two elements with the "slide-3-trigger" ID. The second one should be "slide-4-trigger" instead.

And for future questions, a better way to share workspace code is to make a snapshot of your workspace and post the link to it here.

Rana Dugal
Rana Dugal
9,506 Points

Hi Steven,

Thanks for your advice. Next time I will add link to the snapshot with my question. However, I still could not get it to work even after carrying out the corrections. There must be something else wrong. The link to the snapshot to the workspace is: https://w.trhou.se/qzyo5iqjp9. Thanks for your help.

Regards

Steven Parker
Steven Parker
231,184 Points
Steven Parker
Steven Parker
231,184 Points

The remaining issues seem to be bad image references. Here's one example:

.slide-one { background-image: url('.../images/autumn-219972_1280.jpg'); }  /* workspace */
.slide-one { background-image: url('../Images/autumn-219972_1280.jpg'); }   /* fixed */

There were too many dots in the "previous directory" reference, and "Images" needed to be capitalized to match the directory name in the case-sensitive file system.

Rana Dugal
Rana Dugal
9,506 Points

Best Answer

Steven Parker
Steven Parker
231,184 Points
Steven Parker
Steven Parker
231,184 Points

Rana Dugal — You don't need to post anything, just click on the words "best answer" that appear near "Add comment".

Rana Dugal
Rana Dugal
9,506 Points
Rana Dugal
Rana Dugal
9,506 Points

Hi Steven,

Thanks for your help. I still could not get it to work even after carrying out the corrections. There must be something else wrong. The link to the snapshot to the workspace is: https://w.trhou.se/qzyo5iqjp9.

Regards

Rana

Steven Parker
Steven Parker
231,184 Points
Steven Parker
Steven Parker
231,184 Points

That's the same snapshot. You need to make a fresh one if you want to share recent changes made to the workspace.

Rana Dugal
Rana Dugal
9,506 Points
Rana Dugal
Rana Dugal
9,506 Points

Sorry for submitting the old snapshot. I did take a new snapshot after updating it with your suggestions, but did not check if it contained all the new corrections. Well, here is the updated snapshot. Hopefully, it includes all the changes: https://w.trhou.se/yjh24axqrj

Steven Parker
Steven Parker
231,184 Points
Steven Parker
Steven Parker
231,184 Points

See the comment added to my answer.

Rana Dugal
Rana Dugal
9,506 Points
Rana Dugal
Rana Dugal
9,506 Points

Thanks. It worked. But I don't understand why do I have to click on slider.html to make it work. Why doesn't it start automatically.

Thanks agin for your help.

Steven Parker
Steven Parker
231,184 Points
Steven Parker
Steven Parker
231,184 Points

Only a page with a certain name (typically "index.html") will be started automatically. A page with a different name will need to be selected specifically. Change the file name to make it start by default.

Happy coding!