How to use Swiper with Ionic (instead of ion-slides)

what's up cyborgs and welcome back to a new quick win today we're talking about an alternative to ion slides because when ionic version 6 is released perhaps it's already released by now iron slides will be deprecated so the cool component we all use to create slideshows of images tutorials or anything like that but the good news is we can instead use swiper which was anyway always the underlying package and the usage is kinda basically the same because ionic just proxy the implementation so you could access swiper and now we're just working directly with swiper we're gonna do this we're gonna build a simple uh simple swipes we're gonna use some effect pagination the configuration i'm gonna show you how to use this component instead of ion slides if you're not yet a member you should definitely check it out ionic academy.com my place to help you with everything ionic where you can also access this quick win link below the video so now enjoy the new swiper component or the alternative slider swiper component for the deprecated or soon to be deprecated ion slides if you want to get started with swiper and you look it up on google you will most likely either find this package or if you're already using uh looking for something with angular you're not gonna find the ngx swiper wrapper now initially i thought well i usually really like those wrapper but um version 10 will be the last release of this library since it's an obsolete due to the latest swiper including direct support for angular so please if you're looking for an alternative to ion slides don't use the ngx swiper anymore you can see it were updated years ago and we can instead directly use swiper for angular it's pretty easy um you're going to see we can start today with the blank new ionic application as always and this is the only thing we need to do to integrate spybot really just install swiper and then we just need to integrate it for the integration it follows basically the same scheme like other packages so wherever you want to use it in my example here i will use it in the lazy loaded homepage i'm going to add the swiper module and edit to the array of my imports on top of that we need to import some css and we can do this inside of our global scss if you import it like this with the complete swiper bundle you're gonna have everything that you need you can as well uh take a look at this there are different ways to import different effects components controllers uh css stuff well different things in separate packages uh it's also you can also find this inside the demo so you're gonna see uh which package they are importing uh that can be really helpful anyway in our case we're just gonna roll with this i don't see a big problem right now with that and that's actually everything that we need for the basic implementation now let's quickly get some swipes into our app slides swipes swiper slides i don't know what's it called um we can now use the swiper component um we're going to give it a template reference for a reason that i'm going to show you in a second and inside of the swiper component we can now inject ng templates and here's the directive swiper slide so no red mark if you get something with red here you didn't import wrong make sure you got it inside the module of your page and then you can just put whatever you want in here let's say slide one and we're gonna copy this and we're gonna add oh did this change the color for you as well interesting we're gonna do this for three slides now we got the slides up here but um that's actually not working very well so i can basically slide this and it's not even snipping somewhere and leaving completely the view and the reason is that well we don't have any css defined and as well the swiper isn't initialized correctly for some reason that i haven't found out so far but i found a great answer on stick overflow that was using the after content checked function i think we haven't used that this function actually runs um multiple times whenever something changes um and we're gonna use this to access our view child uh we gave it the swiper name swiper actually there should be yeah exactly a swiper component that you can import from the package that gonna make our live in the end a lot easier since the ng after content check runs a few times we should check if this dot swiper is actually already defined if not we shouldn't trigger what we want to do right here but then we can go ahead with this dot swiper and update swiper we're going to have to pass in some values so just use an empty object and if we now refresh this we see we get this snapping behavior and it works just a lot better now it works like ion slides basically on top of that perhaps we want to use the full page let's quickly cover this if we inspect our application let's make this a bit bigger we can see the underlying structure of the swiper it's basically a swiper container out here and a swiper wrapper around the actual swiper slides so each of them is now the class swiper slide therefore for the container outside let's put a fixed height and width to use the whole view but that's not going to be enough for the actual slide but i can actually now slide here that's pretty cool um but still the slide itself hasn't this center text we can do this with flexbox quite quickly display flex align items and justify content center to center the text hmm why isn't this working that's the regular way of centering stuff well it turns out that injecting these styles isn't working with a regular view encapsulation to make this work you can go back to your home page and set the encapsulation to view encapsulation none that basically means angular isn't interfering with the classes added to your objects um no shadow dumb nothing basically just like angular wouldn't even be there it's not always appropriate in some places it might lead to problems with other components so you got to be a bit careful perhaps you should wrap your own uh swiper implementation in a component where you use this kind of view encapsulation to have it outside of angular other ionic components so that might be necessary but as you can see now with that change our css to the slides is actually applied we see here our swiper slide css using flexbox and centering our content okay that's sometimes even enough for a basic case of let's say building an introduction but of course i want to show you a few more things so let's talk about the configuration the pagination and events you might be used uh to passing in a configuration here and if you check out the documentation can we find this somewhere once again um you're gonna notice that within here they have basically everything here on the component and yes you can do that and no i'm not a fan of that um there really a lot of settings you sometimes need to set for the swiper and i really don't want to have this in my html so instead of doing this we can just pass in a config i don't know why this isn't very well documented on on the angular page because it's really that easy and the cool thing now is uh i i'm not sure if this was working with ion slides before but we can now even use the swiper um i think the swiper options interface let's see from i actually don't know where this comes from let's see but that looks pretty good so now we can get a quick view yeah we get a view and you can find out all the available values for example things that we usually used uh stuff like slides per view and that feels so good with code completion i always felt bad when i was writing this configuration for and injecting it into ion slides um so let's do this having two slides per view bit of space between and pagination with the dots at the bottom for that let's get three more slides three four five six and if we save this we should now already see the effect of our configuration right we got two slides in every view but we still don't have any kind of pagination and to use pagination you need to import other um tools what do they call them modules maybe maybe not modules and use them with the swiper core so we're going to import the actually this is outside of the bracket swiper core from swiper slash core and on top of that we're going to import some objects we're going to use pagination and we're going to do more in the end and now inside of our page we can go ahead with swiper core uh hello where's my swiper core dot use and you can pass in an array of things that your swiper implementation on this page should use for example the pagination if we save this and go back to our application we now see those classic dots down here just like we're used to from the ion slides component if we set this to false i guess we won't see anything anymore oh this is so cool i got a new keyboard and it sometimes randomly turns off that is so funny um i don't know if you ever encountered this but your keyboard turning off while you're typing trying to develop and then it starts and stops again that is so much fun i could wait we are quite okay so we got false in here uh if we use false for the pagination it will be gone once again but of course we're gonna keep this to true and if i can type that word okay that is the configuration and the pagination now in terms of events uh we can also do this from the configuration but i don't know why but for events i feel like it's it's kind of better to use them directly on the component um maybe because we don't have that many events um for example slide changed very common event you could then go ahead and build your little function um let me quickly bring this in because this is really like the most boring function and then we should see whenever we change the slide uh unexpected closing tag yeah things uh thanks okay and the slide changed and within that change block you got access to basically everything from the the slides the index progress well every everything that you can imagine and that should be most of the time enough to build something cool now let's also see how we can use that swiper component from code i'm going to show you a quick way of accomplishing this inside the html i'm going to replace this for now so um i will set allow touch move to false what this means is you can't do this anymore this can be really helpful uh don't say nobody's using this i actually use this in the last ionic academy course so we're going to see how to make this work and programmatically scroll our slides by using three buttons at the bottom to scroll next to previous or to toggle it so let's go to the home page and implement our next function and to go next we can use the swiper component but we can't i use anything directly on it i tried to find something but nothing was working until i found that we need to access the swiper reference and once you get the swipe reference you can really do anything and for example we can do slide pref reset two you can do all the things uh that you want to so slide next uh with the duration you can even have a call back all things that you're used to from ion slides as well and of course if next works slide previous works as well also um i thought we could also make this more dynamic so let's say touch allowed is false in the beginning and with our center button we can toggle this by simply setting the allow touch move property on the swiper reference to either false or true so let's see right now i can't do any kind of sliding here but i can still use the buttons to slide through my application now this should hopefully toggle this and now i'm able to do these cool things once again now it's locked again but i can still use the component programmatically with these events and i think that's pretty cool i usually really need to get full control over the components that you're using and since we can import swipe component we got the interfaces that makes it really easy for us now as a last thing like one more thing i just wanted to show you something funny uh if you check out the swiper effects there are a few cool effects fade cube cover flow flip that you can use uh which can automatically make your app look pretty good or pretty childish whatever you want to call it uh so let's change our configuration to pagination true slides per view auto and using the effect cube and i just added a few random images from unsplash now to use the cube effect we also need to import it let's hope my keyboard now works the effect cube and we can just pass this to the array of things that we want to use for swiper right there and with that in place let's quickly heat over to our content and change the swipe over here to once again a swiper using a configuration nothing special ng template now with an ng4 you're going to use this in a lot of cases when you want to dynamically create the the slides since i don't think you're going to use ng template like 10 times to create your slides and then an image inside so let's see the result of this um the images are actually pretty big so we're gonna have a little loading problem here i'm gonna wait a little bit and then we can do something like this uh right now i think yeah maybe we should just get rid of this and let me think about this i think we should also get rid of the hate here or set it to a fixed value okay that looks already a bit better not too good but i think it's okay so you see uh without doing a lot we get this cool uh effect right here and we could do the same for the cover flow you would just go ahead and look up the name it's okay effect cover flow you're gonna use it and then you set the effect to cover flow and instead of having this cool cube animation you would now have this uh apple inspired cover flow you might have to work a bit with the padding of the elements but usually you see multiple of them can we get a quick preview of that perhaps of course not this is swipe right we can you can see all the demos here so let's search for cover flow that was really the one i wanted to show you it could look like this uh you could also have the cube like we did but you could also have something maybe helpful like the fade when changing so that could be really helpful in some cases as well and once again adding one of these effects is pretty easy um if you're using the bundle everything for the pagination and the effects will be injected automatically if you don't use the bundle for the css styling here you might have to import some separate packages so go check out the documentation for that and then hopefully enjoy uh very cool effects of the swiper instead of ion slides with ionic six all right and that's it for this quick win i hope you enjoyed the quick overview about the swiper component and how to use it with ionic angular if you got any questions about the implementation or perhaps want to see a real use case with this component like a tutorial with the slides of introduction like we had before or perhaps a image call out box preview slideshow whatever you want to call it gallery um just let me know below in the comments and of course leave a like for that new video hopefully this component will help you to make the transition to ionic 6 in future versions ionic 7 8 even easier as you can just rely on this without any wrapper and just using the direct swiper component i hope you enjoyed this i will hopefully catch you next week inside our latest and greatest tutorial so have a great week and happy coding [Music] simon

Channel: Simon Grimm

Views: 8,249

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: XcvieKvmI5A

Length: 19min 8sec (1148 seconds)

Published: Tue Aug 03 2021