CSS Advanced Tutorial: Setting up the JavaScript смотреть онлайн

Setting up a javascript

03.zip https://drive.google.com/open?id=1o4hiMZpogvtZSCNwoO2yS0KRKIhVm4Px

know that we have our carousel looking good. It's time to think about how the whole thing should work. In this lesson we'll set out what we want to carousel to do and build the skeleton that will become our javascript back for the carousel to get started.
Open the module for code file and look for Folder 0 3 start a completed version of this lessons code is in the folder 0 3 and what we want to build is a JavaScript engine that changes the state of the carousel both automatically but also when people click on the quotes or pips while the code we write.
While the code we write to do this might seem complicated.
What it's really doing is just switching around the classes on the ECMO and the CSF transitions can tell the browser how to animate between these states let's start by listing out some goals for what we want this to do. We want the carousel to move the current coach Long automatically.
It should show next previous quote when selected it should stop the automatic movement at this point. Also allow selecting any PIP to go to that quote and it should animate quotes in from off to the left and right of the screen. We can add in some extra requirements such as having the automatic mode come back on after a certain amount of time or pausing the carousel when the browser tab is not in use. We'll look into these later but for now let's set out the structure of what we need for these main requirements when building something like this.

I often chip away building functions as needed and putting them together based on what I want to achieve. sometimes it can help to start with a skeleton structure of functions and fill in the actual code later depending on your way of working.
You may find this useful for this example we'll start by setting up the state of the carousel along with a bunch of functions that we might need in the file carousel DOJ.
Yes you'll find a function block at the top. Any code inside here will run when J query is ready we'll set up the initial state of the carousel by state I mean which of the carousel items is the current one which is previous and next the previous and next quotes won't always be one less or more than the current as the carousel will need to loop.
So sometimes the next carousel item might actually be item number 0 or the previous item might be the last in the line.
To track these we'll refer to them by their index value that is their number in the list starting from 0 these values will need to be used throughout the functions we write. In this case they'll be scoped within this function block any functions we add inside this block will be able to make use of these variables. We start with the previous index which is 0. The first item in the list the current index is then 1 and the next is 2. Lastly let's also add a variable for the last item in the carousel.
This will be useful later when we want to work out if we need to loop back to the beginning of the carousel.
So that's the initial state. Next we add in some click actions since we're using J query we'll be able to let people click or tap and then change the state of our Carousel when this happens.
We'd like people to be able to click on the previous and next quotes as well as click on the pips at the bottom to navigate the quotes we can attach listeners to do this using the J. Curry dollar we pass in the selector which in this case is the I.D. of the quotes carousel.
We then chain using a period the on function we tell it that the event will be click and the class we want to listen for.