Swiper Gallery Buttons

[00:00:01]
>> Brian Holt: So, let's go do those buttons really quick. So we forgot to do that.
>> Brian Holt: The buttons, okay. Back to your index.html here. Underneath the two divs here, above the scripts./ We're gonna do two buttons. One of them's gonna be div class="swiper-button-prev". And this one's gonna be swiper-button-next.

[00:00:36]
>> Brian Holt: So now, if we come over to our little gallery here, the swiper gallery, and we refresh the page. Looks relatively similar, right. But now we have this button here on the side. And if you click on it. Get like a nice little sliding animation there.
>> Brian Holt: So does this look better or worse than the one that we built?

[00:00:57]
I think ours had some like homey charm to it. But what's also cool, try clicking and dragging on it.
>> Brian Holt: Right, that's pretty cool as well.
>> Brian Holt: So how much time will this take us to write by hand? A lot. So it's really nice to be able to do someone else's.

[00:01:19]
>> Speaker 2: Is it supposed to be interactive already?
>> Brian Holt: Did you link your JavaScript here at the bottom?
>> Speaker 2: Yes.
>> Brian Holt: Then I would probably look at your console and see if you have any errors or something like that. I don't have anything in my console at the moment.

[00:01:44]
>> Speaker 3: Curious about like when you're doing a big web page, more than just like a gallery. What is the maximum amount of JavaScript you would link? Is it average like just one library and then one of your own?
>> Brian Holt: I don't know if there's gonna be a cap on how much you would do.

[00:02:01]
Like if you go to like something like Netflix.com and see how many script files, they're probably loading 20 or something like that. The more succinct answer to that is, I'm kind of showing you how to do something like very crafted the each page. When you start getting into larger companies and larger amounts of JavaScript, you'll have basically tools that you'll write a bunch of JavaScript files, and it'll concatenate them and minify and send them down as all in one file.

[00:02:32]
So you could have a little bit more control in what's loaded in what order and things like that. So that's a little bit more advanced use case. In the other version of this that I teach for Frontend Masters, there's a part on how to do that, in a very basic level.

[00:02:48]
So that's definitely a video worth checking out if you're interested in learning how to do that. And then there's a webpack course here. And that's kinda what webpack is for. But that's way more advanced. Cool? Not cool? Pretty cool? Yeah, Lenny thinks it's cool.
>> Speaker 4: John has a question online.

[00:03:05]
He's asking, are these divs a bad thing to implement due to accessibility issues?
>> Brian Holt: I love that you asked me that question. And my first answer is probably. And my second answer is I don't know. So let's take a look. Let's see how well. You know what? They did okay.

[00:03:24]
Look, so they have a role=button here, an aria-label next slide. And aria-disabled is false. So this is actually well done.
>> Brian Holt: But as you can see here, they had to put all this stuff on here to make it look like a button to a screen reader. It's a lot easier to just put a damn button there.

[00:03:41]
So [LAUGH] because all that stuff's just built into buttons. So I could not do this from memory, I would have to go look up. It's like okay, what are all the things I need to for this to look like a button? It's better to just use a button typically.

[00:03:56]
Other questions?
>> Mark: Is this a good time to mention that this script is on the Frontend Masters home page?
>> Brian Holt: Yeah, so should I just, I'll just bring it up here. FrontendMasters.com. So if you go down here. This is Swiper, right, Mark?
>> Mark: Yeah.
>> Mark: There's a lot of performance things I've added to it.

[00:04:24]
>> Brian Holt: But you can see down here, you can see the little pagination that it has. It has a ton of features into it. In fact, I wanna play around with a couple more of them just to show you how to mess with it. But If it's good enough for Frontend Masters, it's probably good enough for you.

[00:04:37]
>> Mark: [LAUGH] Resize the browser and hit refresh.
>> Brian Holt: Like to a smaller size?
>> Mark: Or bigger. Or I guess you don't need to refresh it.
>> Brian Holt: Yeah, so it's actually dynamically alotting how many tweets it's showing at one time.
>> Mark: Yeah, and then, I like lazy load the tweets, because otherwise.

[00:05:00]
>> Brian Holt: It takes forever.
>> Mark: Yeah, there's like 100 tweets.
>> Brian Holt: Yeah.
>> Mark: So, if you have like a ton of them, and just, you don't want to load them all. So Swiper has a lazy load feature.
>> Brian Holt: That's cool. So this library is incredibly flexible. There's tons of stuff you can do with it.

[00:05:19]
You can have it go vertically, you can have it be able to scroll. It's very touch friendly for like phones and stuff like that, which is really, really great. I think we used it, at least at one point, on Netflix.com. So that's also a pretty big endorsement. And if you look on their website, they actually show you all their companies down here.

[00:05:41]
Adobe, Cisco, Disney, BMW, a bunch of companies like that. So Swiper's great. But in general, what I'm trying to show you here is that if you think it's like I need to put an image gallery on my webpage. You can build it like, like now you know, definitely that you can build it, because we built it together, right?

[00:06:01]
But oftentimes, it's better to just say like someone else put a lot of time and thought into this. I'm just going to rely on what they've done. So there's nothing wrong with that. That's not cheating or anything like that. That's what you should be doing.
>> Brian Holt: One of my colleagues at Microsoft made the example of machine learning.

[00:06:23]
He sat down, he taught us in a workshop how machine learning works. It's surprisingly not as complicated as one might expect. And so he sat down and like showed us how to do it. And then at the end of it, he's like, okay, you know how this works.

[00:06:38]
You could build it. Do you want to? The answer's no, I just want Tensorflow or whatever library to do it for me, right? That's kind of how I feel about a bunch of these widgets. I could do this, I don't want to, so I'm not going to. I'll let someone else handle it for me.

[00:06:53]
>> Mark: The fact that you know how to do it means you're gonna better understand how to modify or change the behavior or something.
>> Brian Holt: Absolutely.
>> Brian Holt: Yeah, like you were saying. Like you modified it to be like more in line with your expectations for frontendmasters.com. And that's absolutely what you should be doing.

[00:07:11]
I bastardize other people's code all the time. Actually you could probably call me a professional bastardizer.