FREELessons: 8Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Swiper.js

As a web designer, you’ve probably spent quite a lot of time searching for a good slider—one that’s free, lightweight, customisable and, of course, works flawlessly!

One of my personal favourites is called “Swiper”. It meets the criteria I just mentioned, and it also works on mobile using touch. It has hardware-accelerated transitions, 3D effects, and even lazy loading for images. Oh, and it’s super easy to use. Let me show you an example.

Related Links

2.6 Swiper.js

As a web designer, you've probably spent quite a lot of time searching for a good slider, one that's free, lightweight, customizable, and of course works flawlessly. One of my personal favorites is called swiper, it meets the criteria I just mentioned, and it also works on mobile using touch. It has hardware accelerated transitions, 3D effects and even lazy loading for images. And it's super easy to use, let me show you an example. You can get swiper by going to here, you can see a lot of demos, and also all the information you need to get started with it. So the very first thing you have to do is include the Swiper files, there's a CSS, and the js file. And the easiest way to do it is to use the CDN links, you can also use NPM if you're working with that. So I'm gonna go ahead and copy swiper.min.js, I'm gonna go back to my project I'm gonna paste it right here. And then I'm also gonna get the minified JavaScript file, and I'm gonna paste that right here before the end of the body tag. So script source oops swiper.min.js, okay, next is the markup for the slider, and the markup goes something like this. First we need a swiper container, and inside we need a swiper wrapper and then we can add our swiper slides, so swipe or slide. Let's actually do three of these, and let's add an ID let's say 1, 2, 3, and then we can add our controls. So we can add Pagination, and the pagination goes something like this swiper-pagination and we can add navigation buttons. These look something like this swiper-button-prev, swiper-button-next, so now if we check out our page, we have, well, the previous and next button plus all of our slides, they're all kind of just mushed together. Let's go ahead and activate swiper to do that, we'll go right here, we'll add a script, and we're gonna say the following var, myswiper, for example, you can call this variable whatever you want, = new swiper and we can pass in the parent element of our slider in our case it's swiper-container. And we can also pass in an object with several properties. In my case I'm gonna set pagination, the element that will trigger the pagination is called swiper-pagination. Or the element where the pagination will be displayed, I think that's more accurate. And let's go ahead and save and check it out. All right, now we're starting to get somewhere, let's also add some CSS. We'll say swiper-container, let's give this a width of a 100%, and a height of a 100 view port heights. So we're creating these slides that are as wide and as tall as the actual view port. So now, that looks something like this. Let's also go ahead and set up our navigation, so next element is going to be swiper-button-next", and the previous element will be swiper, or yeah, swiper-button-prev". All right, let's give it a go, refresh, I think I made a small mistake here, the pagination and navigation buttons actually should go right here. So they are direct children of swiper container, not swiper wrapper. The swiper slides should be the only elements within the swiper wrapper. All right, let's try that again, so here are the first slide, slide two, slide three notice how the slides change if you take a look at the the number here on the top. And by the way, with swiper you can also click and drag to change slides. All right, now let's go ahead and add some better content, so we can see this slider in action a little bit better. And for the content, I'm actually gonna duplicate the content that I had on the scroll trigger lesson, because I think that can be applied here very well. All right, so in the first slide, I just added an h1, and on the second slide, I added content, div class content and an image. And by the way, these SVGs that you're seeing, I have them from a website called undraw, and you have a bunch of free SVG illustrations you can get from here and also you can customize their color, very cool resource. All right, so here it is with our new content, And as you can see, it works beautifully. Now, let's style this a little bit, because right now it's kinda bland, let's do the following, swiper-slide. Let's add a flex box display and a center the items, and let's also add a little bit of padding like 5 rems top, 15 rems sides. And let's do a color white because I'm gonna add some background colors to those to those slides. All right on the first slide, I just set text align to center, I set a very light background color and a dark text color. And on the other three slides, I added some very colored background colors. So now here's what our slider looks like, or our slides, Not bad, right? The style of these slides is exactly the one that I used for lesson number four, so those are the basics of creating a slider with swiper.js. Now, let's customize the controls a little bit because I don't like these arrows, also I want this slider to loop. So whenever I get to the end it's gonna just keep going with the first slide, and also figure out the pagination, we're gonna add a nice pagination to it. So let's go back in to my HTML file here, and first let's fix the pagination because I did add the receiving container here, but actually made a mistake and didn't enter the correct selector for it, when I initialized the plugin. So I was missing this dot but now that I have it, you can see the pagination shows up here as well. And since we're on the topic of pagination, I can also add an option called dynamic bullets. I'm gonna set that to true, and this is what it's doing, as it's progressing through the slides, the size of the pagination bullets will change, it's gonna have this very nice effect. Let's also set a loop to true, so that when I get to the end of the slide, it just continues it goes on, To the first slide and vice versa. All right, now let's fix this navigation because I don't like it. You can add custom navigation buttons to Swiper.js, by doing the following. I'm gonna delete these, and I'm gonna add an image, source is gonna be arrow.svg. It's an svg file that I downloaded from XD, and you'll find this bundled with the sources, so we can follow along. For alt I'm just gonna say, arrow and I'm gonna give it a class of customs.swiper.prev. I'm gonna duplicate this, and I'm gonna give it a class of custom-swiper-next, but I'm using the same arrow, we're just gonna flip it 180 degrees. And now on navigation instead of these two classes, I'm simply gonna say custom-swiper-next and custom-swiper-prev. Now the images are there somewhere in our page, but we can't see them just yet because they're probably hidden behind the various slides. So let's go ahead and write the CSS for them. All right, so I'm gonna targets custom-swiper-next, and custom-swiper-prev, we'll do a position absolute, we'll set a top to 50%. And then transform, translate y to minus 50%, the default position or those elements right in the middle of the page vertically. We'll set a z-index of 10 and so they will now be visible, here they are, and what else? Let's set a cursor to pointer, let's lower their opacity a little bit to say 0.5, and let's add a hover state where we increase the opacity to 0.75. And let's also add a nice transition, 0.2 seconds easing-out that's fine. All right, Cool now, let's target each one individually, so custom-swiper let's start with previous. We're gonna set, its left property to 3 rems, okay? So it's this one here, but it should be pointing the other way around. So I'm gonna set a transform rotate 180 degrees, all right so now it's pointing the other way. Let's also style the other one, so custom-swiper-next, this time we're gonna set it right position to 3 rems. We don't actually need a transform here, and just to spice things up a little bit, Let's add a small animation for onclick. So for that, let's start with the previous I'm gonna say active, what I wanna do is basically scale it down to about half its size. So I'm gonna say transform:, Scale( to .5);, okay, so this is the previous. Now notice what happens, it also rotates, and that happens because if I'm gonna say transform scale(.5), I'm basically overriding this rotation transformation, right? So to make sure I also keep that, I'm gonna say, rotate 180 degrees, And that doesn't happen anymore. And let's do the same with this one, the next button, So on active transform here, well, we just have the scale. Now, on this one, we're actually noticing another problem because we also override the Translate y transform. So let's actually add this back to both elements on active, Actually we just needed on this next element. All right, and that's done for the navigation. The last thing we're gonan do to this slider is to customize this pagination. This is pretty simple to do, first, I wanna move it up a little bit so I'm gonna open up the inspector, and I'm gonna find the exact classes that I need. So let's see swiper pagination, and I'm looking for rules that have the bottom property, in which case, it's this one right here. So, we're gonna do this let's see if this works. Because we're basically overriding styles here I'm gonna set a bottom 3 rems okay, so it doesn't work. That means we probably need to be more specific, so let's add the swiper-container-horizontal. All right, and that does the trick, so it was a specificity issue, okay? And finally, now let's replace this blue color because it doesn't match with what we have, we'll just replace it with black or something. And we're gonna look for that main bullet, the one that's active, and let's see, it's called Swiper Pagination bullet, bullet active. So let's do that swiper pagination bullet active, and let's set a background color to black with let's say a 0.6 capacity. All right, so that is much better. Okay and finally one last thing we can do here is enable keyboard navigation, so we can say keyboard enabled true. And that allows us to use the right and left arrow keys to navigate our slider. Now, when it comes to configuration for this particular plugin, there is a huge API, if you go to the official website at, first of all you can see a bunch of demos. Because there are just so many things you can do with swiper, you can create image galleries, you can create this carousel slide, I invite you to go in here and check out all of these examples. But when you go to the API, well, that's where you can find all of the swiper parameters, and they're nicely organized. You can do a lot of things what I just showed you here barely scratches the surface. So yeah, a very complex plugin and a very powerful one nonetheless. So make sure you go ahead and check out the official demos, and the API from the official website. All right and that's it for swiper js a very handy slider plug in. Now lets move to the next plug in on our list and this is a very interesting one, it's called a darkmode.js, and it basically creates a dark mode or a night mode for your website, more about it in the next lesson

Back to the top