Wait... this guy has just over a hundred subscribers? with how excellently you make this tutorials? This is like the first tutorial I have ever come across where I have coded along as was taught and ended up with the exact same results as in the tutorial without errors.
For those of you looking at this and wondering why not the css imports are working. For swiper ^8.3.2, the imports in a Create-React-App project work this way -> import 'swiper/swiper-bundle.css' import 'swiper/modules/navigation/navigation.min.css' import 'swiper/modules/pagination/pagination.min.css' import 'swiper/modules/scrollbar/scrollbar.min.css'
I was struggling with creating a carousel for quite some time and couldn't get it done. You just fixed my problem in under 20 minutes. Great video man and thank you!
Major thanks to you! This video saved me from one big headache! I didn't understand Swiper was built all modular-like. Once you explained that I got my slideshow to work. U are a lifesaver!
Thank for explaining how to customize the arrows. I was going crazy trying to figure that out smh. I was very close to making it work then I threw away my code hahaha. Imma try it again today
That’s a good question. I don’t know if it’s possible with swiper js. But it might be as easy as wrapping the react icon in a div and use the div classname of that div wrapper to pass to the swiper navigation reference in the video. We should test it out
Great Content. Thanks. I have a problem though; I get this error: "TypeError: Cannot read properties of undefined (reading 'init')" the error refers to this line: swiper.navigation.init()
How is this working without importing React from 'react'; ? Also, is there any reason the navigation arrows aren't showing up at all and the slides aren't transitioning automatically?
It’s not needed explicitly here because I’m using NextJS which takes care of all that on compile. Also since React 17 it’s also no longer need in each component, only the main entry point. I’m not sure what you mean by the slides not working. In the video? Or in your own setup you’re doing following along with the video?
@@thedigitalceo Well that’s good to know, I’ve been importing it incorrectly to each component, good to know. WRT the slides not working: I figured it out. I had a simple syntax error, I was way too tired to be coding. Haha
when I deploy to a host, the url in the background-image: url(/path/myimg...) doesn't work, nextjs changes the url on deploying and my css sends notfound :(
Yes it will. Anything in the swiper slide element is fine. Swiper will Just make the elements slide no matter what’s inside. Although keep in mind with video you will probably have to custom code pausing and playing the video on each slide. Swiper js has an api for those things in their documentation
Great video. Helped me a lot. Gotta be honest, your youtube handle threw me off and almost didnt watch the video (maybe I have an issue with the word CEO, sorry). keep it up man
Wait... this guy has just over a hundred subscribers?
with how excellently you make this tutorials?
This is like the first tutorial I have ever come across where I have coded along as was taught and ended up with the exact same results as in the tutorial without errors.
Thanks brother!
For those of you looking at this and wondering why not the css imports are working. For swiper ^8.3.2, the imports in a Create-React-App project work this way ->
import 'swiper/swiper-bundle.css'
import 'swiper/modules/navigation/navigation.min.css'
import 'swiper/modules/pagination/pagination.min.css'
import 'swiper/modules/scrollbar/scrollbar.min.css'
it says that these files are not exported.. what should i do?
Tks bro!
I was struggling with creating a carousel for quite some time and couldn't get it done. You just fixed my problem in under 20 minutes. Great video man and thank you!
What a wonderful comment. Thank you
Major thanks to you! This video saved me from one big headache! I didn't understand Swiper was built all modular-like. Once you explained that I got my slideshow to work. U are a lifesaver!
Great tutorial, i know your channel will blow up soon !!!
Thanks for this illustration man, it has helped in the project i'm building
WoW 😘😘😘 thanks a bunch. Great video.
thank you so much for this, really appreciate the details and intuition!
lol, you're fun! great tutor, man. keep it up 🍻
Hey bro u deserve much more subscribers and views , keep the great work❤👌
This was a v good explanation. Answered some of my questions.
Cool. Thank you. you really helped me
Amazing tutorial, thanks
Thanks, You saved me
Very good explanation man 👍
Thank you! I hope it was a helpful
Thank for explaining how to customize the arrows. I was going crazy trying to figure that out smh. I was very close to making it work then I threw away my code hahaha. Imma try it again today
bro you are a life savior
Thank you!!
great video 👍
that was perfect explain
Very educational and wonderful channel, thanks for sharing. thanks Subbed and liked. a fellow creator,,
Thank you! 🙏🏼
Thanks
All developers derserve to have sass
All developers have their sass kicked by pms 😂
This is amazing! But what if I want to use React icons instead of images? How can we achieve this?
That’s a good question. I don’t know if it’s possible with swiper js. But it might be as easy as wrapping the react icon in a div and use the div classname of that div wrapper to pass to the swiper navigation reference in the video. We should test it out
Awesome! thanks, Now you can make a swiper with more swipers per view? and without errors..
Great Content. Thanks.
I have a problem though;
I get this error: "TypeError: Cannot read properties of undefined (reading 'init')"
the error refers to this line: swiper.navigation.init()
I have this problem to.
Thanks for the tutorial, you have a github for this?
I believe I never made a GitHub for this one. I started doing that for the more recent tutorials
@@thedigitalceo I have done exactly as in the video yet my arrow buttons don't work :(. So would have loved to take a peek
if u hate the uggly blue..
Thank you for sharing that snippet! I also covered my thought sim the video. Yeah I truly dislike that blue it ships with 🤣
The arrows still doesn’t work for me when I added the onInit
How is this working without importing React from 'react'; ?
Also, is there any reason the navigation arrows aren't showing up at all and the slides aren't transitioning automatically?
It’s not needed explicitly here because I’m using NextJS which takes care of all that on compile. Also since React 17 it’s also no longer need in each component, only the main entry point. I’m not sure what you mean by the slides not working. In the video? Or in your own setup you’re doing following along with the video?
@@thedigitalceo Well that’s good to know, I’ve been importing it incorrectly to each component, good to know. WRT the slides not working: I figured it out. I had a simple syntax error, I was way too tired to be coding. Haha
when I deploy to a host, the url in the background-image: url(/path/myimg...) doesn't work, nextjs changes the url on deploying and my css sends notfound :(
The images can be placed in a folder inside the public folder and then the link to an image for example would be /images/xx.jpg
Why don’t you use image component from next?
I definitely do! I left out here just to focus on the slider component. But we should definitely be using the Image component with Next! Thank you
Does this work for videos to?
Yes it will. Anything in the swiper slide element is fine. Swiper will Just make the elements slide no matter what’s inside. Although keep in mind with video you will probably have to custom code pausing and playing the video on each slide. Swiper js has an api for those things in their documentation
how about the pagination ?
Great video. Helped me a lot. Gotta be honest, your youtube handle threw me off and almost didnt watch the video (maybe I have an issue with the word CEO, sorry). keep it up man
What do you mean lol. What did it say?? 😕
@@thedigitalceo nothing important, it is just me not liking the word CEO. Your content is dope 👍
@@pablowbk ah got you. Maybe I’ll come up with something better. It was there before I started my coding videos
why does home.module.scss not working
Which part of the video? Check the case sensitivity of the file name and the reference