Swiper Gallery HTML

[00:00:00]
>> Brian Holt: So first thing we have to do, is we're gonna create a div. And its class is gonna be, swiper dash container.
>> Brian Holt: And these are class names that Swiper chose, so you actually have to use these class names, cuz that's what Swiper's gonna be looking for.
>> Brian Holt: Then we're gonna do div class equals Swiper dash wrapper.

[00:00:21]
Wrapper. And then inside of swiper dash wrapper, we're gonna have a bunch of slides.
>> Speaker 2: It is all in the Frontend Master's website in the notes.
>> Brian Holt: Yeah, that would be an easier way of doing this.
>> Speaker 2: Yeah.
>> Brian Holt: It's like I wrote this or something. [LAUGH]
>> Speaker 2: Almost.

[00:00:43]
>> Brian Holt: Yeah, that is an easy way of doing it.
>> Brian Holt: Yeah, so let's just grab all of these.
>> Brian Holt: Okay.
>> Brian Holt: So that all it does, is a bunch of Swiper slides with image tags inside of them with one through 12. Now, I create a new director, so I'm gonna have to go copy over my images, right?

[00:01:19]
Otherwise, it won't be able to find those images. So I'm gonna open 12 to there. And I'm gonna copy over images, and that the CSS is largely the same too. So I'm going to just, do I even need the CSS, whatever, we'll copy off our CSS as well.

[00:01:39]
>> Brian Holt: So I did was from our previous project gallery, I moved into gallery to the images, so that we have all the Luna pictures, and then the previous styles that we had on there as well.
>> Brian Holt: So now inside of gallery two there's an images directory, was tall pictures of Luna.

[00:01:55]
There's an index HTML which we just wrote together, and there's a style that's at CSS, which is all the styles from our last project.
>> Brian Holt: By the way, I do this all the time, I cannibalize code from previous projects all the time.
>> Brian Holt: There's no shame to do it or I'm shameless, I haven't decided which it is.

[00:02:14]
So now, we're gonna come up here into the head, cuz we're just putting our CSS. So I'm gonna say link, and I'm going to link my styles.CSS. Now this is key, notice that I put my style sheet after their style sheet. And you should do the same as well, the order actually is important here, right?

[00:02:34]
Because you want your code to be, your CSS to be parsed and run last, because if it conflicts with their code, you want your code to win, right. You want all of their stuff to do whatever it's doing, but if you want your code to do something different, you'll want that ability.

[00:02:50]
So here with the CSS, make sure you're putting yours second.
>> Brian Holt: And then down here at the bottom, we're gonna also include our own JavaScript.
>> Brian Holt: And we're gonna say, script, and say src=./, well, we'll just call this.
>> Brian Holt: Yeah, I guess my dash gallery or something like that.

[00:03:27]
>> Brian Holt: Same thing here. And next, it's even more important for the JavaScript. If I put this above here, what happens if I try and refer to Swiper? It's not gonna be available, because Swiper is loaded here. So if I try and use Swiper up here, it's gonna not know what that is.

[00:03:45]
However, if I put it below it, Swiper will be loaded before this gets run. So then it will be available to run. Make sense? So make sure that your JavaScript comes after the Swiper JavaScript.