Exploring Documentation

[00:00:00]
>> Brian Holt: So we're gonna look here at this little tab called API, which stands for application programming interface, or maybe I'm making that up, you should probably look it up. Anyway, API, API basically means this is how you interact with it. Right? Here's all the knobs and switches and buttons you can press on it to get it to do different things.

[00:00:23]
So here you can see you have Swiper Parameters. This is all the stuff I'm passing into swiper. So you can see here like we have the speed with height, like there's a lot of things in here. But like, this one is kinda fun. Let's mess around with effect here for a second.

[00:00:42]
So, I'm gonna go back to gallery or Swiper gallery, rather. So we got Luna there. And I'm gonna come back to my My Gallery. I'm going to add one more thing here that's gonna be effect. And let's just go look at all the effects can be, they have slide, fade, cube, covered flow or flip.

[00:01:07]
Flip sounds fun, so I'm going to put flip there. Okay? Now I'm going to come back over to my gallery here and refresh. Now try hitting your arrow.
>> Brian Holt: And you can kind of mess with it a little bit, right? When does it change? Right there.
>> Brian Holt: That's pretty cool, right?

[00:01:36]
Or one of them was cube, I think. Let's go look at the slide, fade, cube, let's try cube.
>> Brian Holt: Okay, notice there's a little drop shadow down there now, and if I hit the arrow, so again, really cool stuff that I didn't necessarily have to do. Someone else went through and bothered to do this, but it's a really cool effect.

[00:02:07]
>> Brian Holt: And fade, as well, it's one of them.
>> Brian Holt: And then you can kinda go back and forth between the two.
>> Brian Holt: That's one of them you can mess around with! Let's go back to slide, cuz we're gonna keep working with that. Another one that was on here was, swiping, no swiping.

[00:02:39]
Like you can disable it, you can re-enable it, you can say, I don't want them to be able to just slide, like, just to each photo, I want them to be able to slide in between, and not have to like snap to a grid or anything like that.

[00:02:51]
This has just an amazing amount of things, one of them that Mark was showing you was break points you can show and hide certain amounts. So the one that I actually wanna show you is slides per view. Slides per view, that one. So, over here, I'm going to put slides per view instead of having just one that's the default, I'm going to put three.

[00:03:16]
Okay, so now that I have that, I'm going to come back over here and I'm going to refresh. And now I have three other pictures. If I slide, it's going to just do one at a time. And the images are kind of cut off, so I'd have to tool around with that eventually, until I was happy with how it was showing and hiding things.

[00:03:35]
But, nonetheless, that's pretty cool too, right?
>> Brian Holt: And last one I was gonna show here has an auto advance of some sort.
>> Brian Holt: Touches. I don't care about touching. Free mode progress. So you can have it loop as well. So if I put like loop, when it got to the end, it would go back, you would be able to go indefinitely.

[00:04:15]
>> Brian Holt: And death, there's other things as well. So, put loop:true, there as well, see what happens with that. So, now if I go back, it will take me back to the end, right? Or if I go all the way through it, it will loop back around as well.

[00:04:32]
So bunch of stuff you can do there. Questions about that? Yeah?
>> Speaker 2: Yeah, so I really want my buttons to not be all the way over on the side, the edges of the page, I want them to be like on the image.
>> Brian Holt: Mm-hm.
>> Speaker 2: I couldn't see anything obvious in the API that would change that.

[00:04:58]
How do you know if you wanna do something, if it's like in the API, or it's something you have to change in your own HTML versus CSS. Is there a good rule of thumb, or you just have to search through the API and try to figure it out?

[00:05:12]
>> Brian Holt: That's kind of going to be more of what it is. There's not a good rule of thumb. In that case, I can almost guarantee you it's going to be, you're going to have to write the CSS that does that. I didn't see anything in here about button options.

[00:05:24]
>> Speaker 2: Yeah.
>> Brian Holt: So that probably, to me means, I'm gonna have to do it myself. So I gave it these swipe or button previous and next. This gives it the style that it has right now. I can totally take these out and just put them like next and prev.

[00:05:40]
And as long as those matched what was here in my gallery, so I'd have to change this to be next and prev. This would have no style, right, from the library. Then I would get to write all the styles, right? And then you could do whatever you wanted to do with it.

[00:05:57]
>> Speaker 3: Would that still let us use Swiper, though? Cuz I thought you had to call them swiper-button-prev.
>> Brian Holt: You don't have to. So here you're telling us these are the navigation buttons. And so it'll add event listeners on those for you.
>> Speaker 3: Okay, that's what that does.
>> Brian Holt: That's all that does.

[00:06:14]
And then all the styling was coming from the CSS that we brought in.
>> Speaker 3: Okay.
>> Brian Holt: Does that make sense?
>> Speaker 3: Yes, it's [CROSSTALK]-
>> Brian Holt: And then you can do whatever you want. I suppose that just comes from intuition of working with a lot of libraries. Nothing said that to you.

[00:06:36]
So I don't know if I have anything more comforting to tell you than that.
>> Brian Holt: Yeah, like what I would do is, I'd look through is, like, look, they have components here and I would not see, I don't see anything in here about buttons. So to that means, like, if you wanna change how it looks, you're gonna probably have to do it yourself.

[00:06:59]
>> Speaker 3: But I couldn't change those into buttons, because they have to be divs in order for Swiper to work?
>> Brian Holt: I don't think so. So if I did this, so all Swiper is gonna do is it's gonna end event listener on that.
>> Speaker 3: Which is what navigation nextL and prevL does.

[00:07:17]
>> Brian Holt: Exactly.
>> Speaker 3: Okay.