How to implement Swiper with Ionic 7 (ion-slides removed)

In this video, we will use the new Swiper element in an Ionic 7 app with Angular because ion-slides are finally removed!
🔥 The fastest way to learn Ionic: ionicacademy.com/
🪐 Explore web & mobile dev universe: galaxies.dev/
⚡️ Just getting started?
Grab a free 46 pages eBook: ionicacademy.com/ionic-quicks...
#############################
👨‍💻 Want to read instead of watch?
Here's the full Ionic tutorial: ionicacademy.com/swiper-ionic...
🤷‍♂️ Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️ You can also find me on:
Instagram: / simongrimm_
Twitter: / schlimmson
Facebook: / devdactic
TikTok: / simongrimm_
Or join the Simonics Facebook group:
/ simonics
#############################

[@galaxies_dev]

Learn to build epic IONIC apps FAST by joining the Ionic Academy: ionicacademy.com/

[@promtermor]

Is it in @ionic/angular? 'cause i don't like react 🤮

[@andersonantunes3287]

This is the video I was needing. Thanks Simon!!

[@galaxies_dev]

Happy to help Anderson :)

[@guleye]

I was waiting for that. Love you simon 💙

[@galaxies_dev]

Thanks Muhammad 💪🏻

[@williamscott3673]

Thanks a lot for the help. I had set it up into my project like normal but was struggling to find a good way to get a reference of it in typescript. Had no idea there was an `afterinit` event. Very helpful. Thanks a lot!

[@galaxies_dev]

Happy I could help :)

[@caiosales176]

Awesome! Thanks a lot Simon!

[@galaxies_dev]

Glad you liked it!

[@simbaclaws_youtube]

Dear Simon, would you be kind enough to tell me how I can import a swiper-container and slide within a angular component? Because defining the schema and registering it in some page, doesn't allow me to use it within a angular component, how can I do this in a component? Do I need to register the swiper there somehow? Please let me know what I can do, I'm trying to migrate an app to ionic 7 from 6.

[@andresfcuellarc]

Thanks a lot! as always save my day!

[@galaxies_dev]

Glad to hear that!

[@supabitra]

Thanks a lot, Simon, for this video and all the other videos. It makes life easy for many like me. 🙏🙏 Can you kindly make one video with Swiper 10 as it seems a bit different than Swiper 9. Especially as seems no demos are available anywhere for the Ionic implementation of Swiper 10. Thanking you in advance.... 🙏🙏

[@galaxies_dev]

Great suggestion!

[@townheadbluesboy]

Great video Simon

[@galaxies_dev]

Thanks 👍

[@osroot]

hi, i started watching you recently, i got a bit confused, you still present projects with modules are still can be created with components not standalone ones, i am 6 months experience in ionic and i don't know what is better, standalone or modules in components, and if modules in components then how to do it because ionic and angular made the standalone structure is the default when creating a new project, i will grateful if you help me out Simon, thanks in advance..

[@galaxies_dev]

Angular standalone components are probably the way to go in the future, so you should adapt that pattern. It's anyway not a huge change, just the place where you put stuff has changed a bit!

[@ingjuliosg]

Very well, thank you

[@galaxies_dev]

Welcome!

[@user-yo5oz5td6h]

sir how about if standalone? component MerchantPage is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?

[@saq.ib01]

Great as always. I have one request. how can we implement Deferred Deep linking in capacitor.

[@smritimaygayen9609]

Thank you 👍

[@bastiencs4536]

Great video Simon. For a reason I ignore, I had to write zoom="true" instead of [zoom]="true" to make the zoom works.

[@galaxies_dev]

Strange but glad it works!

[@mobileexpensys]

many thanks - I needed to do this too but only after reading your comment!

[@nicholas1103]

thanks alot, zoom="true" solved my problem. i stuck this issue two hours. [zoom]="true" work with normal page, but not work when in modal.

[@hannesg.3586]

thank you. in modal it only works like this for me.

[@user-eb2ip3qm8p]

正是我们需要的，谢谢！！！😀

[@wilsonhernandezortiz2472]

Amazing!!

[@galaxies_dev]

Thanks!!

[@rajtkbabu]

Hi simon, how we can connect slides with ion-segment or tabs?

[@ionwizard606]

Good work simon. Even in original swiper page we can't find a proper video about this

[@galaxies_dev]

Glad it was helpful!

[@tigerebevinmasevenza9761]

I am using swiper 11.0.5 and the [loop]="true" is not working but l can still swipe the images is this a bug? Capacitor 5 on ionic 7

[@SPACJuniorDeveloper]

slidechange function is not fired. Also is it possible to dynamically autoplay the slides, like a toggle button

[@SPACJuniorDeveloper]

installing previous version of swiper worked for me: npm i swiper@9.3.2

[@GosuMania]

Please can you do a video for Virtual slides of Swiper JS

[@jp.moyacastillo]

Hi Simon, thanks for your videos first! One question, which angular version are you using?

[@galaxies_dev]

I try to stick to the latest, but think it was 16 in this video!

[@AbramxoAzul]

I have a question, the properties of the swiper in the video are made in the html... how can I create them in my .ts and how can I call them in my swiper-container? thanks for the video !

[@galaxies_dev]

I actually haven't found a good way to include a config like before, probably you have to init swiper completely from code then with a config object!

[@venkateshprasathv8716]

I have doubts while i am creating a swiper slider in my project i can't edit swiper pagination active bullats how to change active color bullets kindly tell me bro please. I need it.

[@emov]

same problem, have a solution?

[@MrAashish24]

Thanks a lot Simon!! I have one issue - I have updated Xcode and Safari technology preview. After updating, I am not able to inspect simulator and my connect IOS device. Can you please create one video in detail which will cover following points - 1. How to test ionic application using developer tools - (Network api calls, inspect the elements) 2. How to debug the application using Xcode in details (signing app etc.) 3. Android - How to debug and use chrome inspect in details. Please Please create video on this. Thanks in advance!!

[@galaxies_dev]

Thank you Aashish, will see what I can do!

[@shukridamit5723]

Hi Simon, In SwiperJS 11, we can't set the parameter using [options]. Can you help on this?

[@aishwaryamk6315]

have u fond the solution?

[@bander_wardi]

Hello Simon, can I know the theme and font you are using in vs code. Thank you!

[@galaxies_dev]

I am using Shades of Purple!

[@lucaagnoli4373]

Hey, thank you for your video. It was very helpful! I have a question. Can I have a swiper-container with two swiper-slide, one with scrolling, and the other one without scrolling I mean fixed?

[@galaxies_dev]

Hmm maybe just make the whole swiper only 50% of the width if one part should be some fixed content anyway?

[@lucaagnoli4373]

@@galaxies_dev I made it work with overflow and touch-action CSS properties. But thanks for the answer, I really appreciate it. Greetings from Argentina.

[@jeffersonestrada3668]

Gracias!

[@galaxies_dev]

Encantado 🙌

[@leocharrua_uy]

With the last version of swiper (10.0.4), I couldn't get to work the pan function (when zooming). Installing swiper 9.2.2 works ok.

[@mortezakehtari888]

Hi Simon, I was wondering how we can add new slide after swiper initiates?

[@galaxies_dev]

You should be able to set the datasource for swiper to a new array!

[@user-se8md2hs2d]

Dear friend, could you help me please? If i pass register() to appcomponent then previous/next buttons don’t work either. At the same time, I can scroll through it by dragging or pagination buttons… I really don’t understand how to make the previous/next buttons work normally. I also found a way to put register() in ngAfterViewInit in setTimeout or put it to some button click - it works, but I think it’s a bad option…

[@jonathansimon7614]

What worked for me is updating to the latest ionic version and "downgrade" Swiper to the version 9.2.2, with that, everything worked for me like in the video.

[@danielromero9577]

@@jonathansimon7614 Worked for me, thanks!

[@kelubboy]

I an issue of slow page load due to massive number of components from components module Any idea on how to solve

[@victorm9131]

There could be a couple of problems here. It is hard to guess without the overview of the repo. 1. Try to split masive components into multiple smaller ones. Which use dumb-smart component pattern that would allow you to use OnPush Change detection. 2. Use lazy loading of other Modules and routes 3. App Component should be very lightweight. There shouldn’t be any logic. The logic has to be in the main Container component (smart) 4. When separating modules an loading them lazily, you could also benefit from Preload all module from the router. 5. Instead of having a masive Shared Module with declarations and exports, try to use SCAM (Single component per module) pattern and try to remove Shared Module entirely.

[@codetalk0]

Bro Do not working Next and prev Button Functionality In my case. My angular version 15 and swiper 9. please help me to do this .

[@jonathansimon7614]

Are you using Ionic? I had the same problem but then I updated my Ionic to the latest version and switched to Swiper Version 9.2.2, now it works like in the video!

[@mersalmohamed5493]

swiper has an issue in loop if the elements less than sliderperview*2 is there any solution for this

[@aishwaryamk6315]

yes its happening did u find any solution?

[@AdityaKumar-es6tx]

this is great and working but i am unable to move to next slide through slideNext and even slideTo is not working can you suggest any solution am using ionic with angular

[@ronaldomartins3244]

I wasn't getting it either. I included a settimeout in swiperReady() and this made a difference. swiperReady() { setTimeout(a => { this.swiper = this.swiperRef.nativeElement.swiper; }, 300, []); }

[@lynxnunkima3872]

Hello Simon, can you create Bluetooth Thermal printer app using ionic angular using firestore as backend or even just offline printing app please @SimonGrimm

[@kshitijmall7325]

What about auto-play-delay

[@goutamsingh3220]

what is your npm version & node version??

[@galaxies_dev]

Node 16 and npm 8

[@diegoAb]

Swipper use uiwebview and apple deprecated that webview in store? Or not?

[@galaxies_dev]

No, Apple did not deprecate webviews. They are used in all apps, and only a specific type of "copycat" apps that only uses webviews was forbidden some years ago!

[@diegoAb]

@@galaxies_dev no webwiews, uiwebview, ITMS-90809: Deprecated API Usage - Apple will no longer accept submissions of new apps that use UIWebView as of April 30, 2020 and app updates that use UIWebView as of December 2020. Instead, use WKWebView for improved security and reliability

[@diegoAb]

@@galaxies_dev I meant that if swiper 10 uses uiwebview since I had swiper 8 in an app and when I wanted to upload an update Apple would not accept my app until I removed swiper from my application

[@markusfurrer1202]

As soon as I import "import { register } from 'swiper/element/bundle';" I am getting an error: node_modules/swiper/element/swiper-element.d.ts:6:11 - error TS2430: Interface 'SwiperContainerEventMap' incorrectly extends interface 'HTMLElementEventMap'. using Ionic 7 and swiper 9. anyone an Idea?

[@markusfurrer1202]

Solved it by downgrading from "swiper": "9.3.0", to "swiper": "9.2.4",

[@ArielGarciaMarin]

what is the command o way to do it? Thank you in advanced @@markusfurrer1202

[@hafeez-qalandari]

Hello. Can we get the code for it plz!

[@aaiz37]

Any alternative solution for infinite scrolling ?

[@galaxies_dev]

You should use the frameworks solution for infinite scroll!

[@devsplanetng]

If not how do i implement the swiper since I don't have module.ts to add the schema 😊

[@67009]

same problem here too

[@yurizem3325]

same mistake I created a component to control it but I can't use the swiper inside it since I don't have a product.component.modul

[@chewbacca01]

How did you manage to start an ionic 7 project with angular without being standalone components?

[@galaxies_dev]

They actually reverted that change, so should be easily possible right now!

[@chewbacca01]

@@galaxies_dev Thanks

[@jankocev276]

Hi, is there any way to use *ngFor with swiper-slides?

[@galaxies_dev]

Sure, should work just fine!

[@jankocev276]

@@galaxies_dev i'm sorry, I put the question wrong way, with ion-slides, I was using ng for to generate slides for every image in array and after user added/removed another image I could simple remove it/push it into array. this approach doesn't work. By swiper js documentation I have to call swiperRef.NativeElement.swiper.addSlide(index, stringHtml) and that leads to string html in my code (kinda ugly). is there some better way to get this dynamically generated slides? Also to use *ngFor i have to put swiper-slide template inside ng-container.

[@chocolatejuiceify]

@@jankocev276 Did you find a way to do this without using the html strings?

[@jankocev276]

@@chocolatejuiceify I did't, so i created my own component

[@patricianieves8235]

I have installed Swiper 10.2 and followed all the steps from the video, but even so, when I try to integrate Swiper into my HTML, I get an error: - error NG8001: 'swiper' is not a known element: [ng] 1. If 'swiper' is an Angular component, then verify that it is part of this module. [ng] 2. To allow any element, add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. [ng] 10 [ng] ~~~~~~~~ Can someone help me pls!!!

[@galaxies_dev]

I think for Swiper 10 the usage changed yet again -.-

[@simbaclaws_youtube]

I think I'm having the same issue right now, is there any documentation anywhere on how to set this up on ionic 7?

[@jared4670]

swiper doesn't seem to play well with ngfor.

[@Newswapmedia]

I think ionic will dead soon in future because many plugins is outdated which was important to build app

[@nemocode7941]

I'm not trust you. but I pushed subscribe button and like button. haha😝 And In ionic 7, xxxx.module.ts file is not found at startup, but you can put CUSTOM_ELEMENTS_SCHEMA in component.ts file. like this @Component({ ... schemas: [CUSTOM_ELEMENTS_SCHEMA] })

[@galaxies_dev]

Yes, I have a separate video about those changes to Angular standalone modules as well!

[@arunt9013]

@@galaxies_dev we could not find that angular standalone video, could you please share the URL?

[@user-eb2ip3qm8p]

I have many pages that use switchers. Do I need to inject schemas: [CUSTOM.ELEMENTS_SCHEMA] into the modules of each page? Can I simply inject them in one place and use them directly on other pages?🤣

[@galaxies_dev]

AS far as I understand you need it in all of the pages right now.

[@user-eb2ip3qm8p]

@@galaxies_dev Yes, can you add it?

[@Crazycosmichild]

hello the [config] its not working in the swiper-container tag??? i cant find the way to solve it id need to set the breakpoints but cant configure the config its not working

[@galaxies_dev]

yeah haven't made config as an object work, but you can also set the properties directly like we did in the video!

[@angrymayo1978]

yea but somehow breakpoints throw an error, since property is a number based name. Having the same issue@@galaxies_dev

[@lynxnunkima3872]

Hello Simon, can you create Bluetooth Thermal printer app using ionic angular using firestore as backend or even just offline printing app please @SimonGrimm