SwiperJS. React swiper js. How to use react-swiperjs and create a carousel (with source code) 2023

In this tutorial, we'll create a carousel with SwiperJS. Swiper - The Most Modern Mobile Touch Slider.

Check out my courses here!

Support this channel:

Let's be friends:

#SwiperJS #Swiper #Carousel

[tahep]

it is not working with the newest or newer versions of swiper, so you should install this version

[DomingosRodrigues-dev]

There is a warning in the Swiper docs: "Swiper React components will likely to be removed in future versions. It is recommended to migrate to Swiper Element instead." How can I do it in React using Swipper Element?

[jubayerkhan]

Thanks you so much for uploading this tuotorial, it's so helpful 👍👍👍

[codedusting]

How to do multiple sliders in one page? It has a problem of shifting all the sliders on keypress

[COEInventoryBorrowing]

Try to avoid using this. It's so unstable when it comes to complex styling

[GameForYouOnline]

cool, but at 2023 usuage swiper-container and swiper-slide unfortunable more arguments not work=)
<swiper-container
slidesPerView={3}
spaceBetween={30}
pagination={{dynamicBullets: true, }}
autoplay={
{delay: 5000}
}
effect='fade'


>

=> (
<swiper-slide key={product.id} className="mySwiperSlide">
<img src={product.photoUrl} alt={product.title} className='mySwiperImg' />
</swiper-slide>
))}
</swiper-container>

[lautaroaramis]

nice video and explications, greetings from Argentina 😊😉

[AnaLebjodkina]

Can you please show how to make this slider responsive?

[sohelchannel]

I want to auto loop the slider. please give me the solution, it will be helpful for me 🙏

[KaPaTeJIbaoek]

That was helpful, in october 2023 I have some troubles with import css

[yadhuvtk]

Hi im facing issue when i scroll to next nothing showing just blank page please help me❤

[googleaccount]

use a proper TE please. What is this lol.

[jackywan]

how to make a play and pause button inside carousel to control it?

[serhiiarkhypenko]

Ну и акцент, как будто индуса смотрю.

[АйбекМамасалиев-щя]

you are a trouble maker, respect, your english is perfect

[yazanqarabash]

How can i add breakpoints to swiper in react? I am currently using 'swiper/element/bundle'