All right.
Welcome back.
So the Tauriel we will be creating the background slider for our landing page of Joachim.
The background slider is going to have five images that fade into one another so they're visible for
five seconds.
They take a five second fade in and then a five second fade out and the fade out overlaps with the fade
in for the next image creating a crossfade effect.
So the first thing I'm going to do is open up my scene I have a directory called background slider and
background cyder is actually just version 11 of your cam.
So if you take your version of 11 and create a version 12 then you can begin working from that directory.
So I'm going to visit the tutorial that I created on get have
the euro for this is get have dot com slash my user name which is in a x 3 T and then slash background
dash slider.
So the first thing we're gonna want to do is open up our landing that Ejaz page go back over to my workspace
go to the views directory and open up landing W.J. as though I'm going to go back over here to the tutorial
and I'll copy this whole portion of code so that it can replace all of this.
Now what we have here is our doctype set is to mount and then inside of our head area we have a couple
of links.
We have one for bootstrap Mendonsa SS That's our CDN for bootstrap.
Then we link to our custom stylesheet.
This is a new style sheet that I created because I don't want to use any of the styles from the main
CSSA these styles are going to be specific to the landing page.
So we're also going to have to add a landing that CSSA inside of our stylesheets directory but we'll
get back to that in a second.
I've also added the CDN for something called moderniser.
So what modernisers going to do is going to check the browser for the version and then it'll add some
special classes to our page in case the browser is older like Internet Explorer 8 and that will allow
our CSSA to latch onto those classes that are added by moderniser and make our page more cross-browser
compatible inside of our body.
We have our container div and then we have our conditionals for our errors or success messages and then
we have a div that I've created with an idea of landing header.
This is where I put the H-1 with our Welcome to your camp text.
Then we have our view all campgrounds button.
We've also added an ordered list with a class of slideshow and it has five list items.
So this is pretty interesting.
We're not actually going to use the body to create the background because we have multiple backgrounds
that are fading into one another.
We need to attach them to some type of Tummo element.
So what we've chosen to do is attach each background to each one of these list items.
So you'll notice we have five list items that correspond with the five background images that we're
going to have cross fading into one another and at the bottom we have our Parshall's filter just like
before.
We're going to go ahead and use the include tag and then directed to Parshall's for Slash for.
So we say for landing that UJA us and we go ahead and run our server so run Mongar the and that gets
my Monga daemon running then we can open up another tab and run node on.
If you don't know about Pneumon yet go and install it it's an alternative to using node app.
Yes.
And what it does is it listens for any file changes on your server and if it gets changed and saved
it goes ahead and restarts the server for you that we don't have to keep going back and forth to your
server tab.
Closing it down and restarting node so to install that we're going to run the command NPM install Dutchie
for global and then node 9 or no daemon so once it's install as long as we're inside of our parent directory
for our project we can run no daemon and then look for the Apter jazz file.
Or you can explicitly tell it.
No daemon app that Jad.
So now that we have our server running let's go and preview it I'll open it up full screen here.
And currently we have this H-1 and then we have a button and we have our five list items.
So now what we have to do is go back and Stuy all of this to make it to where this is center and these
list items are all the bullets for the list items are hidden and then replaced with a giant background
image that takes up the entire page.
You'll notice that we no longer have the navigation bar on top because on the landing page we don't
really need it.
We can just go to view all campgrounds and then the user wants to sign it and they can sign up or sign
in from there.