How to use SwiperJS with Ionic (Swiper in Ionic Framework with React)

With the IonSlides being deprecated in v6 of Ionic - We need to look for other ways to implement a touch slider within our Ionic Framework mobile apps.
Luckily, the IonSlides within the Ionic Framework used SwiperJS under the hood (as pointed out in the documentation), and now being available for all JavaScript frameworks, we're able to reach for this package to handle this functionality for us.
This is a tutorial where I take you through an example of the usage of the SwiperJS slides within a travel style app, then show you a step by step guide on the code implementation.
#############################
🔗 Ionic React Travel App UI (with code)
ionicreacthub.com/ionic-react...
🔗 Tutorial code
github.com/alanmontgomery/ion...
🔗 SwiperJS modern mobile touch slider
swiperjs.com
🔗 SwiperJS React documentation
swiperjs.com/react
🔗 IonSlides documentation (for reference)
ionicframework.com/docs/api/s...
🎉 Reach out to me
/ 93alan
💙 UI Examples with Code and Live Demos
ionicreacthub.com
#############################
00:00 Introduction
00:20 IonSlides brief mention
01:02 What is SwiperJS?
01:52 App example with SwiperJS
03:08 Code Tutorial
#ionic #capacitor #webnative #swiperjs #react #reactjs #ionicreact

[@AlanMontgomery]

Hey guys! Make sure to leave a little like please! Subscribe if you enjoyed this video and to get more in the near future!

[@connygu]

Great job, Alan! I am just searching this!!!

[@AlanMontgomery]

Thanks so much! Very much appreciated!!

[@musanzawanga2083]

Your videos very comprehensive. Drop more content like this! 💙

[@AlanMontgomery]

Wow thank you so much! I have a lot of content planned starting in the next few weeks.. 🙌

[@musanzawanga2083]

@@AlanMontgomery Awesome. Can't wait! 👍

[@yannicknana]

Loving your content !

[@AlanMontgomery]

Thanks so much man! Means a lot to me 😀😀🙏 hopefully this was helpful!

[@jpxcar]

Great video, thanks!

[@AlanMontgomery]

Thanks for your kind words! Means alot!

[@theday1journey703]

adding the slider to my app... and putting you in the background for coding along!

[@AlanMontgomery]

Aw that’s great man thanks so much! Glad I can help out!

[@mafiakingc]

You are awesome man ❤️❤️

[@AlanMontgomery]

Thanks so much for that man! Means a lot! Glad you liked it!! Hope to see you around here :)

[@JoshuaMorony]

Nice one Alan!

[@AlanMontgomery]

Thanks Josh !! 💪🤩

[@blakebedford-palmer6676]

Interesting! I have been using Ion-Slides to do kind of tinder style swiping

[@AlanMontgomery]

Awesome! Hopefully this video will help you convert to SwiperJS then! 😀

[@MrAvelino2010]

how do you start a project with js instead typescript

[@mdmoinuddinkamal3412]

Thanks for .very helpful content brother. you can make new content for react.js or others javascript libraries.

[@AlanMontgomery]

No problem at all I’m glad it’s helpful! Yes for sure, new content coming in the next week 💪

[@MrAvelino2010]

Can you make series of reac ionic routes, tabs, nested routes, params etc the doc it´s not clear and there´s no good examples provide

[@AlanMontgomery]

Have a look at this playlist Ionic Tab Bar/Tabs kzbin.info/aero/PLaeoIQ5GBVooYaCdARSkpc8diEasoBm_q

[@gtanmoy]

Nice video!...How do you get the live view of the app in your real device! If you have any video about how to get the live view in our real mobile device using ionic react please let me know

[@AlanMontgomery]

Hey ! Thanks so much for the comment. I actually get asked this a lot so I have planned a video "How to" for this specific topic!

[@kabileshs9617]

Hi Alan..Thanks for the video..Its a great content....I almost solved my problem...Unless I could not swipe across the images...Kindly help me

[@AlanMontgomery]

No problem at all! It’s my pleasure! Did you follow my implementation? If you have a link to GitHub project with your example I could take a look for you!

[@justinrubinssonaugustine703]

hi. do you know if this could be used with the ionreactrouter to be like a swipe able tab?

[@AlanMontgomery]

This definitely could work. We could move the router on swipes. I’ve noted this as a video idea as I’ve a batch of new video content coming in the next few weeks.

[@justinrubinssonaugustine703]

@@AlanMontgomery that's great news! I have been trying to figure out how to combine the components for a while and haven't had much luck.

[@AlanMontgomery]

Amazing ! This will definitely help then

[@justinrubinssonaugustine703]

@@AlanMontgomery hi Alan. I managed to get the ion router combined with swipe gestures working. However it becomes very laggy after a few minutes of the app running. Do you have any idea why this may be?

[@victormbarachi4701]

Hello , thank you so much for this video, However the pagination doesn't show on mobile device.

[@AlanMontgomery]

Thanks man I appreciate it! You have to import the pagination through the core SwiperJS modules have you tried that?

[@victormbarachi4701]

@@AlanMontgomery No I haven't how do I achieve that please? Thank you!

[@AlanMontgomery]

@@victormbarachi4701 check out swiperjs.com/react under usage scroll down to the pagination part