Swiper Gallery JavaScript

[00:00:00]
>> Brian Holt: Create a new file in here, call it my Gallery or whatever you chose to call your JavaScript.
>> Brian Holt: We're gonna come in here, and we're going to use.
>> Brian Holt: Open the styles, CSS, that you just copied over. And I'm just gonna put these stuff down at the bottom here.

[00:00:22]
We just need to add a couple more things. So a swiper slide, we're just gonna give it a text align of center, otherwise our pictures are gonna be off, so text align center.
>> Brian Holt: And then the images in there, we're just gonna give them a height of 600 pixels.

[00:00:40]
So image height, 600 pixels.
>> Brian Holt: Only two things I added there were these.
>> Brian Holt: Now, open your my dash gallery.js that we just created here.
>> Brian Holt: Real simple here. So we're gonna say new Swiper.
>> Brian Holt: .swiper dash container, like that.
>> Brian Holt: Comma, and then we're gonna give it an object as well.

[00:01:23]
>> Brian Holt: So I could do this all in one line, I'm gonna do it on multiple lines cuz it gets pretty dense otherwise. So I'm gonna hit enter there, and put it on multiple lines here. Speed:400, this is how fast things swipe between each other. I don't know what 400 necessarily represents, but it represents a thing.

[00:01:40]
You can make it go up and down, and play with it. SpaceBetween, I think this is the space between photos, it's a hundred pixels, is what that represents. And then navigation.
>> Brian Holt: We're gonna say, the next button is going to be Starts wiper, dash button dash next and the prev L.

[00:02:14]
>> Brian Holt: Is .swiper dash button dash prev.
>> Brian Holt: We forgot to do the buttons. We'll go to do the buttons here in just a second.
>> Brian Holt: So you might be looking at this, I don't really understand what this is doing. And that's kind of, par for the course with working with someone else’s You don’t really have to understand what is happening underneath it, right?

[00:02:42]
You are just gonna play around with the parameters that you passed to it, until eventually, it looks the way that you’re happy with.
>> Brian Holt: And that’s literally all that I did here as well. So this is almost exactly what you copy and paste off of their tutorial. Let’s talk about new for a second, because we have not seen that before.

[00:03:01]
The one blind version of what news is, you don't have to care. [LAUGH] The three line version is, there's a thing called object oriented programming. Where you can actually, you can create an abstract, animal class, and then you can have a dog class that inherits from the animal class, right?

[00:03:21]
And new is kind of the thing that allows you to establish those relationships. Don't do it in JavaScript, because it's really messy, other languages like Java do it really well. But, with javaScript, it just a mess. So, I just suggest, unless some tells you to use new, like this particular library does, don't.

[00:03:41]
>> Brian Holt: So, in other words, you don't have to mind it. I wanted you to know what it is, at least enough to know it's, I don't want to touch that. So,
>> Brian Holt: Okay.
>> Speaker 2: One question.
>> Brian Holt: Sure.
>> Speaker 2: In the documentation, they talk about creating a variable, mySwiper, why are we not doing that?

[00:04:02]
>> Brian Holt: So you can't do this, and that's exactly what this does, it returns a new instance of the Swiper. Because you can have you can have five swipers on one page and you can have them keep several of them, since we're never referencing it later, we don't necessarily have to keep it around.

[00:04:19]
>> Speaker 2: Okay.
>> Brian Holt: But if if you want it to later programmatically manipulate it, then you would have to hold on to it.
>> Speaker 2: So this will get called, automatically, essentially.
>> Brian Holt: Right, so this is still basically invoking a function. In fact, that's literally what it's doing, it is invoking a function.