Transcript from the "Swiper Gallery" Lesson
[00:00:00]
>> Brian Holt: I'm gonna create another folder here called gallery2. You can call it gallery library version, or something like that, just as long as it's different than gallery. Or you can overwrite your old code if you're not attached to it, but I would suggest keeping it around, okay. And then I'm going to open this with VS Code.
[00:00:17]
I can actually just, where did Spotify come from? Gallery, and then you can just drag and drop that onto VS Code, and it'll open that in VS Code. So now I have gallery2 open here in my editor. I'm gonna minimize this.
>> Brian Holt: Okay, and I'm gonna put that in here.
[00:00:43]
>> Brian Holt: So now, I'm going to create another new file, and I'm gonna call this index.html, in here.
>> Brian Holt: And I'm gonna create another HTML document. This one is gonna be called Swiper Gallery.
>> Brian Holt: Okay, and then here, I'm gonna say, the first thing I'm gonna need to load is from Swiper.
[00:01:18]
And I'm gonna go link, and I can actually load this directly off the Internet. I don't even have to download it, I can just download this directly from the Internet. So I'm gonna put, that's a lot of things to write, so let's just go copy it off of their website.
[00:01:33]
I think they have it on here.
>> Brian Holt: Where is their API documentation? There it is. Okay, so scroll down on the website. There's a little API button here, or actually let's go with Download.
>> Brian Holt: Nope, that's not the one I want. Get Started.
>> Brian Holt: There it is, okay.
[00:01:58]
So go to Swiper, scroll down. Find Get Started With Swiper, down here, under, And It Is Free.
>> Brian Holt: Okay, and then we're gonna scroll down here, it says, Use Swiper from CDN, here on 1b.
>> Brian Holt: Okay, then I'm gonna grab the top one here, link stylesheet here, Swiper CSS.
[00:02:22]
I'm just gonna copy that whole thing right there.
>> Brian Holt: And I'm gonna put that in the head.
>> Brian Holt: So why am I grabbing this one and not the min one underneath it? So this one, the minimized one is, it's all crunched together, and it's made to be very, very tiny.
[00:02:40]
So it's the smallest it can be, so that if you put it on your production website, your real website, it's just a little bit smaller, so people can download it faster. However, we're doing the development stuff, and so it's easier if it's a little bit more spacious and easy to read.
[00:02:55]
If you wanna see what that looks like, you can actually just copy and paste this URL into your browser. So what you need to do here, where it says 4.x.x, you're gonna say 4.4.2.
>> Brian Holt: And now we should be able to pull that out.
>> Brian Holt: Okay, so now if we copy and paste line 8 here of Swiper 4.4.2, you can see here that it's just a lot of CSS.
[00:03:27]
Now, if you look at that and say, they're doing a bunch of stuff there that I don't know what it does, neither do I. But that's kind of the magic of using open source libraries like this, is it's relatively a black box, right? They say, if you touch these buttons, it's gonna do these things right?
[00:03:42]
So same thing with your computer, when I touch my keyboard I don't know what it is doing, but magic things happen on my screen, so that's cool, right? Relatively the same thing here is that, as long as I adhere to their documentation it's gonna do the things I want it to do.
[00:03:57]
Okay, so we have to load some CSS to do it, and then we also are gonna need to load some JavaScript here down at the bottom. So going back here,
>> Brian Holt: I'm going to grab here the one that's just the top one.
>> Brian Holt: So again, we're gonna grab the debugging version here.
[00:04:17]
So this one says Swiper 4.x.x, not with the min and not with the esm. So, grab that top one.
>> Brian Holt: And then down at the bottom of your body, we're gonna put that in there as well, and we also have to change that to be 4.4.2, like that.
[00:04:40]
>> Brian Holt: And again, we should be able to go in over here and say,
>> Brian Holt: You can see here, if we paste this in here, it's actually a lot of JavaScript, you can see a lot of JavaScript. So now, what's gonna be interesting,
>> Brian Holt: Where is, what did I call this Swiper gallery?
[00:05:11]
>> Brian Holt: So I'm gonna open this in gallery2. I'm gonna open that, Open. So you shouldn't see anything, right, cuz we haven't put anything into our HTML yet. But what's gonna be interesting, if I come in here to my console,
>> Brian Holt: Now I have this Swiper thing available. So now that's loading this new Swiper object that's now globally available for me to mess around with.
[00:05:36]
That's what these two things are doing. Swiper's the CSS that runs the gallery, but this Swiper JS thing now makes this Swiper thing available so that I can play around with it.
>> Brian Holt: Make sense?
>> Brian Holt: Cool, so now I'm gonna come in here and I'm gonna write the HTML in the way that the docs tell me to.
[00:05:58]
So just so you know, the way that I did this, and the way that you will eventually have to do it, if you go into Swiper and say, Get Started.
>> Brian Holt: It's gonna give you step by step documentation of, do this to your code, do this to your code, do this to your code.
[00:06:17]
And it's gonna help you kind of go step by step to get what they want you to do.
>> Brian Holt: But we're gonna walk through all that stuff together, so you can see what it's like.