I still use Swiper in my React projects, even if it gets discontinued meaning that they won't release new updates, the previous versions will continue to work. If you're looking for an alternative look at this one → ua-cam.com/video/pfZx8y74KE4/v-deo.html
@@hamedbahram I agree with you. Our projects still will be working with previous versions, although we'd miss the benefits of the updates to new versions. Thanks for your contribution. 😁👍 Pd: Swiper won't be supported for Vuejs in the future anymore.
Sure, I'll have that in mind. From a high level, accessing user's geolocation requires the `navigator` object in the browser, so you'd need to use a client component for that.
Hi, thanks for the video. Do you know how to overwrite the navigation style. I use SCSS module on other components, but it doesn't work on this slider for some reason.
It may be specificity issue. You can target the navigation button by `.swiper-button-prev` and `.swiper-button-next` css classes. Try passing the `!important` flag to override the swiper styling.
Thanks for the tutorial! Do you know how I can implement swiper gallery in a specific part of my site in Next JS if I have different components and already a page.tsx file in my app folder?
@@hamedbahram Yes, thought the same. But when I press the keyboard right or left arrow to slide up the slides, all slides in the page move. And the docs are not helpful either.
Hello. How do you solve the problem in NextJs, when not one slide is displayed but 3 at once. The problem is that at first 1 slide is shown and then the other 2 are loaded and it looks like a bug?
@@hamedbahram I don't have any pictures. The problem here is that the container is being loaded. This is the only way I have solved it: import dynamic from 'next/dynamic' const myComponent = dynamic(() => import('@/components/myComponent'), { ssr: false }) export default function Example() { return (
I've seen that note on the docs. React doesn't support web components yet, and until they do, the SDK is the most declarative way to use Swiper in React.
Awesome implementation, the typescrpt version would be very much appreciated
Glad it was helpful!
this channel is going to hit 100k+ subs so fast
Thanks, I appreciate it.
as always gr8 content and useful. surely will use in my next project, thx bro
Great to hear that! I appreciate it.
Thank you for the video. Would have been great to see this used in a server side component while ensuring performance.
Thanks! Can't use the SwiperJs on the server, it requires React hooks and browser APIs.
Isn't it possible to pass a server component as a children prop to the SwiperSlide component? @@hamedbahram
Why didn't you tell us that Swiper React will be deprecated coming soon? I'm sorry that Swiper won't be supported for React anymore in the future. :(
I still use Swiper in my React projects, even if it gets discontinued meaning that they won't release new updates, the previous versions will continue to work. If you're looking for an alternative look at this one → ua-cam.com/video/pfZx8y74KE4/v-deo.html
@@hamedbahram I agree with you. Our projects still will be working with previous versions, although we'd miss the benefits of the updates to new versions. Thanks for your contribution. 😁👍
Pd: Swiper won't be supported for Vuejs in the future anymore.
Bro, I need to implement geolocation inside of my nextjs 13 app. Can you make a video on how to use geolocation in the server side of nextjs 13? TYSM😃
Sure, I'll have that in mind. From a high level, accessing user's geolocation requires the `navigator` object in the browser, so you'd need to use a client component for that.
@@hamedbahramthank you bro..
I’m curious to know how do you setup the import order. It’s so neat and comfortable to the eyes.
Manually 😅
Hi, thanks for the video. Do you know how to overwrite the navigation style. I use SCSS module on other components, but it doesn't work on this slider for some reason.
It may be specificity issue. You can target the navigation button by `.swiper-button-prev` and `.swiper-button-next` css classes. Try passing the `!important` flag to override the swiper styling.
Thanks for the tutorial! Do you know how I can implement swiper gallery in a specific part of my site in Next JS if I have different components and already a page.tsx file in my app folder?
Of course you can, what is the problem you're facing?
This would be a better video if your project was using typescript, it's almost impossible to work with swiper and typescript
Hmm 🤔 haven't had that experience!
I am using NextJs 13 and swiper v10.3.1 but it's giving getStaticPaths is not a function error. How to resolve this?
Are you using the App router?
How to add multiple sliders in one page where keyboard pressing doesn't change other slider's slides.
You can create different instances using the `Swiper` component.
@@hamedbahram How? I have multiple swiper components in a page but still the same result 😕. Thanks for replying though.
@@codedusting I'm not sure if I understand the problem here. If you have two `` components in a page, they would work independent of one another.
@@hamedbahram Yes, thought the same. But when I press the keyboard right or left arrow to slide up the slides, all slides in the page move. And the docs are not helpful either.
Hello.
How do you solve the problem in NextJs, when not one slide is displayed but 3 at once. The problem is that at first 1 slide is shown and then the other 2 are loaded and it looks like a bug?
You can pass `priority` prop on your `Image` component for the first three images to avoid lazy loading.
@@hamedbahram I don't have any pictures. The problem here is that the container is being loaded. This is the only way I have solved it:
import dynamic from 'next/dynamic'
const myComponent = dynamic(() => import('@/components/myComponent'), {
ssr: false
})
export default function Example() {
return (
)
}
@@yagelProject I see, well are you using this inside a server component? Cause the swiper sdk requires react hooks and browser APIs to work correctly.
Thanks. What if I need to fetch data from the server? I need to use a method that call a graphql query and that will be the cards on the swiper
You can use the `swiper` APIs to control the slides.
which one is the best swiper or emblac react and UI need should be effective
I like embla.
Respected Sir,
I would like to ask you if it's possible to make a marquee like continuous sliding in Swiper JS ?
Thanks! I'm not sure what a marquee like sliding is but you can see their example implementations here → swiperjs.com/demos
Hi! Thank you for the video! How can you use the Image component without explicitly setting the width and the height?
If you import images statically into the component using it (as I'm doing here) you won't need to set explicit dimensions on the `image` component.
@@hamedbahram got it! Didn't know about that. Thank you!
@@kiuri. Anytime.
you are the best
Thank you!
what font are you using please, it's cool
Operator mono
How about 'use server' component?
The swiper component requires a client component to work.
Tried with .tsx and doesnt work why is that? thanks
It's probably SwiperJs types.
kheily khub bood mersi
Eraadat 🫡
I need to make the swiper images seo friendly. How can I render swiper images on sever side?
you can't
Great example! I think swiper react comps are going to be replaced by Swiper Element in future versions.
I've seen that note on the docs. React doesn't support web components yet, and until they do, the SDK is the most declarative way to use Swiper in React.
Can you help me how to use Swiper in ssr page in Nextjs14?
Swiper requires browser APIs and can only be used in client components.
i think embla-carousel better than swiper please check this package
Nice package I liked it. Thanks for the suggestion.
Check this out → ua-cam.com/video/pfZx8y74KE4/v-deo.html
Like!
Awesome ✌