Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn to create a fullscreen horizontal slider, or image carousel, using pure CSS. Image carousels are a popular pattern in web design, and there are hundreds of jQuery plugins you can use to create them. This workshop will demonstrate that HTML and CSS are more than capable of handling the task.
Fork this workspace to follow along.
Quick Reference
Related Videos
-
CSS Selectors - Treehouse course
- Element States Pseudo-Classes
-
Child, Adjacent, and General Sibling Combinators
- Substring Matching Attribute Selectors
Pure CSS Horizontal Slider - CodePen
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hi everybody I'm Dave Conner and this
tree house workshop we're going to create
0:04
a full screen horizontal page slider.
0:08
No JavaScript simply using HTML and CSS.
0:10
These sliders have been a popular
design pattern for many years and
0:14
their are hundreds of jQuery
plugins out there to create them.
0:16
Today, however,
we will demonstrate, that HTML and
0:19
CSS are more than capable
of handling the task.
0:22
And once we start coding, it may
surprise you how little CSS it takes,
0:26
to create some pretty neat effects.
0:29
So let's get started.
0:31
First, let's look at
what we will be building.
0:32
We have a full page
slider with navigation.
0:35
There are transitions, and fade-ins.
0:38
Pretty much a typical slider.
0:41
In order to create our slider we
will be using radio input elements
0:43
along with their check pseudo-class.
0:46
It is this pseudo-class that will allow us
to target and style each individual slide.
0:49
Along with any annotations or
content we wish to overlay.
0:53
In our index.html,
we have a div with the class name of rap.
0:56
And we have a radio input
group named slides.
1:01
Notice that we have the first one checked.
1:06
This will be our starter slide.
1:10
The natural behavior of the radio
button to only allow for
1:13
one checked element in a group
will provide the checked state.
1:15
If we open this up in the browser,
1:19
you can see only one of these radio
inputs can be checked at one time.
1:21
If we click on one,
the other is unselected.
1:25
So this is the check state and
1:29
this is what the check pseudo-class
will target in our CSS.
1:31
But before we get into our styles,
let's first build or slides.
1:34
We will be placing one slide
in between each radio element.
1:38
Before the first input,
we will add a section.
1:46
We will give it a class of slide,
and since it is our first slide,
1:52
we will also give it a class of slide-1.
1:55
Inside our section, I'm going to add
a headline tag that says Headline One.
2:04
And that's it for our slide.
2:13
Let's copy this, and paste one section
between each of our radio elements.
2:15
Then I'll just change the class
of the sections to slide-2.
2:37
Slide-3 and slide-4.
2:42
And we will also be changing
these headlines up as well.
2:46
This will be headline two,
headline three, and headline four.
2:51
Okay, now we have four slides.
3:00
The next thing we wanna do
is create our navigation.
3:03
We could use our radio inputs but
instead we will create labels for
3:06
each of our radio elements.
3:09
These labels will act as controls for
our slider.
3:11
So right above our slides
we will create a header.
3:15
Inside this header will be our labels.
3:25
We will use the four attribute, to tie
them to their respective radio inputs.
3:28
So we use the idea of the first radio as
the value of our first four attribute.
3:33
Which in this case is slide-1-trigger.
3:40
Then I'll just call this Slide One.
3:48
With that done I'm just going to copy and
past three more times and
3:51
update each of these four
attributes along with the text.
3:54
So, we'll change this to Slide Two,
4:06
Slide Three, and Slide Four.
4:12
So far we have a div that's
serving as our wrapper.
4:23
We have a header which contain
our navigational elements.
4:26
And finally we have our radio
slider section combinations here.
4:31
Now let's go add some styles.
4:35
We have two stylesheets linked
in our index.html document.
4:42
The first one is style.css.
4:46
This is just some demo border plate code.
4:48
We will be working in horizontal.css.
4:51
Opening it up.
4:55
We will begin by making sure our html and
4:57
body elements are both 100% in height and
width.
4:59
So we'll write html, body.
5:03
And make the height 100%.
5:09
And the width also 100%.
5:13
Then we will remove any padding or margin.
5:17
This is to make sure that our slides will
be full screen so we wanna take away any
5:24
padding or margin that the browser
will add to either of these elements.
5:28
Now we will style our wrapper
which is this class of wrap.
5:35
I'm going to give this a height and
width of 100%.
5:41
I'm going to give this a height and
width of 100%.
5:52
But this could really be any
size you want the slider to be.
5:55
The div with the class of wrap dictates
the size of our slides and our images.
5:59
Next we wanna set our div relative And
set our overflow to hidden.
6:04
This is so we can position our
slides absolutely off screen and
6:15
we won't get any horizontal scroll bars.
6:18
Finally I'm just going to set
the background to a dark gray and
6:21
set our text color to white.
6:24
So the headline is centered, we're gonna
go ahead set text align to center.
6:33
So, now that our wrapper is done,
let's create our header navigation.
6:41
We are going to give the header a
background that is slightly lighter grade
6:48
than our wrapper and
apply it like box shadow.
6:52
We will position it absolutely
to the top-left corner.
7:08
And give it a z-index of 900 so
7:22
that we are sure that's on top
of the rest of the content.
7:23
Finally we will set the width to 100%.
7:28
Next lets style our labels.
7:36
We'll set the color to a light gray
7:38
that you can see here.
7:51
We must change the cursor so it looks like
a length so we will set that to pointer.
7:53
Next we will display inline-block.
8:02
This way, our labels will be side-by-side
and centered in the middle of our header.
8:09
Inline-block also allows for
our line height to be respected,
8:14
which we will add now.
8:17
Let's go ahead and
8:19
add a line height of 4.25em.
8:22
This gives us a larger clickable area.
8:27
So, the layout of our
label buttons are done.
8:30
Let's go ahead and
add our textiles and some pattern.
8:33
First, we'll add font size of .667em.
8:36
Then we'll add font weight of bold.
8:44
And finally, the padding.
8:50
Which we'll just add 0 1em.
8:52
Let's also go ahead and
add a slight hover effect.
8:57
For this, we'll just set the background
to a lighter shade of grey.
9:09
And with that our navigational
buttons are done.
9:17
Let's save this and look at our page.
9:21
As you can see we have our header and
our header buttons.
9:26
If we click on slide two
the second radio gets selected.
9:30
So our label buttons are performing
as expected and looking good.
9:34
Now it is just a matter
of styling our slides.
9:38
So going back to horizontal.css,
9:41
we are going to style all the slides
as a whole using our slide class.
9:44
Once again we will set width and
height to 100%.
9:55
Now we will set each slide's
position to absolute and
10:05
we'll give them a top of zero and
a left of 100%.
10:07
With these styles, we are pushing all of
our slides off to the side of the window.
10:20
Next we will set all known z-index to 10,
then some padding.
10:25
For padding I'm gonna have 8em, 1em 0.
10:34
Okay, our base slide styling is done.
10:41
Now we must set our background images for
each slide.
10:44
Before we do that, on the slide class,
10:48
I'm going to set the background
color the same as the wrapper.
10:50
I'll center the background with
background position 50%, 50%.
11:02
Then, I'll set the background
size to cover so
11:15
our images fill up the entire slide.
11:17
Next, I'm just going to copy and
paste some images here for each slide.
11:26
These tiles give each slide
a different background image.
11:31
You can copy this code
form the teacher’s notes.
11:34
And with that our slides are done; but
they are all currently off screen.
11:37
We want to move them onto the screen only
when the right radio element is checked.
11:41
So all that is left to do is
to target this text state.
11:47
We are going to use an attribute selector
to select any input that has an ID
11:51
that starts with slide.
11:55
Then we will further qualify the selector
by adding the pseudo-class of check.
12:00
This will target any of our radio
inputs as they all begin with slide.
12:08
Then by using the adjacent sibling
combinator which is the plus sign,
12:14
we can finally target our slide.
12:18
When our radio element is checked,
we want to position our slide
12:27
back on the left corner of our wrapper,
so we will set left to 0.
12:31
Then, we wanna raise the z-index to 100,
12:36
to be sure our slide is on
top of the previous one.
12:39
And that's it.
12:45
Let's save that and
see what we just did in our browser.
12:46
And there you have it.
12:51
We have a nice header navigation.
12:52
And when we click on our labels
we get a new slide image.
12:53
Okay that's pretty cool.
12:59
But the name of the workshop
is Full-Screen Slider.
13:01
And this is definitely not sliding.
13:03
For that, we just have to
apply some CSS transitions.
13:06
Let's go back, one more time,
to horizontal.css.
13:09
To smooth our whole slide or
13:14
transition out, we're going to add
a transition to our checked slide.
13:15
So, inside our checked slide selector,
13:19
we are going to transition our
left property over .65 seconds.
13:21
With a little easing.
13:26
And this case we'll use ease-out.
13:29
And since we want our current slide to
wait until the next one has come onto
13:32
the screen.
13:35
We will go to our slide class and
add a transition from the left as well.
13:36
This time we want it to happen immediately
so we'll set the duration to 0.
13:43
But we also want to delay
it by 0.75 seconds.
13:47
So these transition styles have
the new slide coming in and
13:53
afterward our old slides, slides back out.
13:56
And while we're adding transitions, we're
not limited to just the slide itself.
13:59
We can also do some slide animations
with these headlines that we have in
14:03
each slide.
14:07
I'm going to target our slide H-1, and
I'm going to give it an opacity of 0.
14:13
Then I'll translate that dow the Y-axis by
adding a transform of translate Y 100%.
14:22
Then I'll give it a transition for
transform with a 0.5 second duration and
14:31
a point 0.5 delay.
14:36
We'll add a comma.
14:47
And then we'll transition
the opacity over 0.5 seconds.
14:48
This transition will allow us to see
the opacity go down to zero, but
14:57
it will delay the transform until
the next slide is already covering it.
15:00
Now we will target our headline when
our input is in its checked state.
15:05
We will change the opacity back to 1.
15:19
And translate back to 0.
15:23
For this we'll transition both over 0,5
seconds and give them a 0.5 second delay.
15:30
This will have our headline appearing and
15:39
rising as the slide is
coming onto the screen.
15:41
So let's save this, and real quick, look
how that'll code we have actually written.
15:44
Not that much so
lets check that out in the browser.
15:52
And there you go.
16:00
Nice new transitions for
our full-screen slider.
16:02
There you have it.
16:10
We've just built a full-screen slider,
without the need for
16:11
a single line of JavaScript.
16:14
As front end developers we have
a lot of tools at our disposal.
16:15
Exercises like these are a great way
to push those tools to the limit and
16:18
see just how much they can do.
16:21
With just a small amount of CSS we're able
to create some nice animation effects and
16:23
do to the built in
behavior of radio inputs.
16:28
The arrow keys provide
the second means of navigation.
16:30
This technique provides a great CSS
alternative to a classic JS approach.
16:32
So I hope you have enjoyed this workshop.
16:37
I'm Dave Conner and i'll see you
next time, thanks for watching.
16:39
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up