[MUSIC]

Hi everybody I'm Dave Conner and this tree house workshop we're going to create

a full screen horizontal page slider.

No JavaScript simply using HTML and CSS.

These sliders have been a popular design pattern for many years and

their are hundreds of jQuery plugins out there to create them.

Today, however, we will demonstrate, that HTML and

CSS are more than capable of handling the task.

And once we start coding, it may surprise you how little CSS it takes,

to create some pretty neat effects.

So let's get started.

First, let's look at what we will be building.

We have a full page slider with navigation.

There are transitions, and fade-ins.

Pretty much a typical slider.

In order to create our slider we will be using radio input elements

along with their check pseudo-class.

It is this pseudo-class that will allow us to target and style each individual slide.

Along with any annotations or content we wish to overlay.

In our index.html, we have a div with the class name of rap.

And we have a radio input group named slides.

Notice that we have the first one checked.

This will be our starter slide.

The natural behavior of the radio button to only allow for

one checked element in a group will provide the checked state.

If we open this up in the browser,

you can see only one of these radio inputs can be checked at one time.

If we click on one, the other is unselected.

So this is the check state and

this is what the check pseudo-class will target in our CSS.

But before we get into our styles, let's first build or slides.

We will be placing one slide in between each radio element.

Before the first input, we will add a section.

We will give it a class of slide, and since it is our first slide,

we will also give it a class of slide-1.

Inside our section, I'm going to add a headline tag that says Headline One.

And that's it for our slide.

Let's copy this, and paste one section between each of our radio elements.

Then I'll just change the class of the sections to slide-2.

Slide-3 and slide-4.

And we will also be changing these headlines up as well.

This will be headline two, headline three, and headline four.

Okay, now we have four slides.

The next thing we wanna do is create our navigation.

We could use our radio inputs but instead we will create labels for

each of our radio elements.

These labels will act as controls for our slider.

So right above our slides we will create a header.

Inside this header will be our labels.

We will use the four attribute, to tie them to their respective radio inputs.

So we use the idea of the first radio as the value of our first four attribute.

Which in this case is slide-1-trigger.

Then I'll just call this Slide One.

With that done I'm just going to copy and past three more times and

update each of these four attributes along with the text.

So, we'll change this to Slide Two,

Slide Three, and Slide Four.

So far we have a div that's serving as our wrapper.

We have a header which contain our navigational elements.

And finally we have our radio slider section combinations here.

Now let's go add some styles.

We have two stylesheets linked in our index.html document.

The first one is style.css.

This is just some demo border plate code.

We will be working in horizontal.css.

Opening it up.

We will begin by making sure our html and

body elements are both 100% in height and width.

So we'll write html, body.

And make the height 100%.

And the width also 100%.

Then we will remove any padding or margin.

This is to make sure that our slides will be full screen so we wanna take away any

padding or margin that the browser will add to either of these elements.

Now we will style our wrapper which is this class of wrap.

I'm going to give this a height and width of 100%.

I'm going to give this a height and width of 100%.

But this could really be any size you want the slider to be.

The div with the class of wrap dictates the size of our slides and our images.

Next we wanna set our div relative And set our overflow to hidden.

This is so we can position our slides absolutely off screen and

we won't get any horizontal scroll bars.

Finally I'm just going to set the background to a dark gray and

set our text color to white.

So the headline is centered, we're gonna go ahead set text align to center.

So, now that our wrapper is done, let's create our header navigation.

We are going to give the header a background that is slightly lighter grade

than our wrapper and apply it like box shadow.

We will position it absolutely to the top-left corner.

And give it a z-index of 900 so

that we are sure that's on top of the rest of the content.

Finally we will set the width to 100%.

Next lets style our labels.

We'll set the color to a light gray

that you can see here.

We must change the cursor so it looks like a length so we will set that to pointer.

Next we will display inline-block.

This way, our labels will be side-by-side and centered in the middle of our header.

Inline-block also allows for our line height to be respected,

which we will add now.

Let's go ahead and

add a line height of 4.25em.

This gives us a larger clickable area.

So, the layout of our label buttons are done.

Let's go ahead and add our textiles and some pattern.

First, we'll add font size of .667em.

Then we'll add font weight of bold.

And finally, the padding.

Which we'll just add 0 1em.

Let's also go ahead and add a slight hover effect.

For this, we'll just set the background to a lighter shade of grey.

And with that our navigational buttons are done.

Let's save this and look at our page.

As you can see we have our header and our header buttons.

If we click on slide two the second radio gets selected.

So our label buttons are performing as expected and looking good.

Now it is just a matter of styling our slides.

So going back to horizontal.css,

we are going to style all the slides as a whole using our slide class.

Once again we will set width and height to 100%.

Now we will set each slide's position to absolute and

we'll give them a top of zero and a left of 100%.

With these styles, we are pushing all of our slides off to the side of the window.

Next we will set all known z-index to 10, then some padding.

For padding I'm gonna have 8em, 1em 0.

Okay, our base slide styling is done.

Now we must set our background images for each slide.

Before we do that, on the slide class,

I'm going to set the background color the same as the wrapper.

I'll center the background with background position 50%, 50%.

Then, I'll set the background size to cover so

our images fill up the entire slide.

Next, I'm just going to copy and paste some images here for each slide.

These tiles give each slide a different background image.

You can copy this code form the teacher’s notes.

And with that our slides are done; but they are all currently off screen.

We want to move them onto the screen only when the right radio element is checked.

So all that is left to do is to target this text state.

We are going to use an attribute selector to select any input that has an ID

that starts with slide.

Then we will further qualify the selector by adding the pseudo-class of check.

This will target any of our radio inputs as they all begin with slide.

Then by using the adjacent sibling combinator which is the plus sign,

we can finally target our slide.

When our radio element is checked, we want to position our slide

back on the left corner of our wrapper, so we will set left to 0.

Then, we wanna raise the z-index to 100,

to be sure our slide is on top of the previous one.

And that's it.

Let's save that and see what we just did in our browser.

And there you have it.

We have a nice header navigation.

And when we click on our labels we get a new slide image.

Okay that's pretty cool.

But the name of the workshop is Full-Screen Slider.

And this is definitely not sliding.

For that, we just have to apply some CSS transitions.

Let's go back, one more time, to horizontal.css.

To smooth our whole slide or

transition out, we're going to add a transition to our checked slide.

So, inside our checked slide selector,

we are going to transition our left property over .65 seconds.

With a little easing.

And this case we'll use ease-out.

And since we want our current slide to wait until the next one has come onto

the screen.

We will go to our slide class and add a transition from the left as well.

This time we want it to happen immediately so we'll set the duration to 0.

But we also want to delay it by 0.75 seconds.

So these transition styles have the new slide coming in and

afterward our old slides, slides back out.

And while we're adding transitions, we're not limited to just the slide itself.

We can also do some slide animations with these headlines that we have in

each slide.

I'm going to target our slide H-1, and I'm going to give it an opacity of 0.

Then I'll translate that dow the Y-axis by adding a transform of translate Y 100%.

Then I'll give it a transition for transform with a 0.5 second duration and

a point 0.5 delay.

We'll add a comma.

And then we'll transition the opacity over 0.5 seconds.

This transition will allow us to see the opacity go down to zero, but

it will delay the transform until the next slide is already covering it.

Now we will target our headline when our input is in its checked state.

We will change the opacity back to 1.

And translate back to 0.

For this we'll transition both over 0,5 seconds and give them a 0.5 second delay.

This will have our headline appearing and

rising as the slide is coming onto the screen.

So let's save this, and real quick, look how that'll code we have actually written.

Not that much so lets check that out in the browser.

And there you go.

Nice new transitions for our full-screen slider.

There you have it.

We've just built a full-screen slider, without the need for

a single line of JavaScript.

As front end developers we have a lot of tools at our disposal.

Exercises like these are a great way to push those tools to the limit and

see just how much they can do.

With just a small amount of CSS we're able to create some nice animation effects and

do to the built in behavior of radio inputs.

The arrow keys provide the second means of navigation.

This technique provides a great CSS alternative to a classic JS approach.

So I hope you have enjoyed this workshop.

I'm Dave Conner and i'll see you next time, thanks for watching.