Responsive Slider | Swiper Slider 3D-Coverflow Effect React JS

🥰 Join this channel to get access to perks 👇:

🔗 Source code

👨‍💻 Hire Me As a Web Designer

☝ How to download the project

- Click on the GitHub link
- Click the green button (code)
- Click Download ZIP
- Extract the project to the desired location

🔔 Subscribe for more!

📱 Join Facebook Group

👍 Don't forget to smash the like button and share the video with your friends if you found the video useful.

Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.

Thanks for watching!
Make sure to Subscribe For More!

#html
#swiperJs
#reactJS

[csepriyanshmishra]

i have update for SWIPER package
import { EffectCoverflow, Pagination, Navigation } from 'swiper'; this will not work in recent version you have to add this instead
import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';

[koi]

Sheesh looks lovely in the start, can't wait to see who it was done

[juanse_velasquez]

Thank you for the tutorial!

For the ones using typescript. I think the correct way to write the navigation attribute of the Swiper Component would be:

navigation={{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
enabled: true
}}

and not

navigation={{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
clickable: true
}}

Both approaches work, but according to the source code the interface NavigationOptions includes "enabled" but not "clickable".

[visualgraphics]

I always learn something new from your videos.👌

[RamiroRojasP]

Thank you very much!!!! I struggled a bit but finally could make it. my page only showed the images on the right but not on the left...
I had to put !important in the .swiper-slide class in the CSS and that solved my problem

[earnstein]

Yall should not be mean in the comments, if it's not working for you then ask properly and stop throwing tantrums. If it's easy why not just build it yourself and not come to youtube?. Thank you for the video, don't let these little thinker people stop you from doing what you do for people for free.

[thiernodem]

For anyone who's having issues, know that this video's codes works fine, you just don't have the right imports for the swiper since it's been updated overtime. So, instead of importing swiper like Swiper like this import {Swiper, SwiperSlide} from 'swiper'; do this import {Swiper, SwiperSlide} from 'swiper/react'; and for the Navigation and Pagination do this import {Navigation, Pagination, Scrollbar} from 'swiper/modules'; because they are inside the modules package

[sampletayo]

thank you. worked in my next js project, just had to scale the images down and change the swiper import like someone suggested in the comment section.

[techlightdev]

So cool and amazing tutorial. Thank you

[melaniebrown]

Thank you very much, it worked! How do I hide the following slides so that only the previous ones (left) are visible?

[cristiandanielriosquintero]

thank you very much! It wat totally helpful! even thougth my card dont centralize 😄

[itchyJaw]

if you have existing website and wanting to add this just remove the html zoom part so it wont enlarge your existing page and 1 more thing remove the scrollbar thumb so the scroll thumb on the right wont look odd.

[rohitrawat]

bro you really deserve a like 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍 thanks for your tutorial and here's a request for you that plz add a caption or title / heading to understand it easily

[israelabaho]

Hi, thanks for the good job - i have a question, how did you enter the image numbers from 1-7 whats the short cut to enter > and the number auto increments?

[sugamphirke]

How can I make the middle slide to stay on by default. If I have total of 9 slides I want the 5th one to be on top(by default), while 4 on right and 4 on left.

[pranjulkushwaha]

Nice tutorial,
which extension you are using that shows imported image's preview in left side ?

[thamismedina]

I made something very similar in vue 3, but there something i could pull of, i wanted to grow the card in the center if i double click on it, i tried to set out with classes but i could pull of, do have any tips for that?

[shakiqurrahman]

Bro prev img & next img are not showing! 😢

[mrays]

Nice video, everything is explained in detail

[arianhajiaghaei]

bro you really deserve a like . what is your vs code font ?