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

🥰 Join this channel to get access to perks 👇:
/ @codsfli
☕ www.buymeacoffee.com/cods
🔗 Source code
github.com/emetdas/KZbin-co...
👨‍💻 Hire Me As a Web Designer
www.fiverr.com/emet24
☝ 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!
/ cods-yt
📱 Join Facebook Group
/ 3072356883017916
👍 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

[@cse090priyanshmishra6]

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';

[@codsfli]

Thanks for sharing your knowledge.

[@prasanjitsarker2589]

full screen slider gap much more, how can i fixed?

[@ojonugwamartinsonogu3319]

Did you find a work around for this?@@prasanjitsarker2589

[@hubertlayle6812]

@@prasanjitsarker2589 nothing?

[@DProgram-xb9pp]

Mod is not a function

[@8koi245]

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

[@visualgraphics2235]

I always learn something new from your videos.👌

[@codsfli]

Glad to hear that!

[@matiasvargas1729]

Wow! That is a pretty cool slider

[@codsfli]

Thanks 🙏

[@juanse_velasquez9831]

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".

[@codsfli]

Thanks for sharing your knowledge. many many thanks, bro.

[@earnstein7607]

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.

[@codsfli]

For people like you I still make videos. Many Many Thanks for your support 🥰

[@earnstein7607]

@@codsfli really appreciate. I've been looking for inspiration to build a carousel for a project I'm working on and you've really helped me with that.

[@codsfli]

Thanks 🥰

[@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.

[@codsfli]

Fantastic!

[@spryzen001]

How did you add the scripts they used in the beginning of the video? Next js does not have any html file and I can't figure out how to use the scripts.

[@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

[@codsfli]

Glad it helped!

[@salmabt6204]

thank you ! your comment saved me :)

[@saqibahmad5938]

can you help me with that please?

[@yerson8119]

si! Tienes mucha razón

[@salmabt6204]

great work ! thank you

[@codsfli]

Thank you too!

[@techlightdev]

So cool and amazing tutorial. Thank you

[@codsfli]

Thanks

[@Ankii_kumar]

Great work ❤

[@codsfli]

Thanks 💖

[@user-rv1bx8hx4v]

Thank you! Great video

[@codsfli]

Thank you so much 🥰

[@thiernodem5681]

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

[@codsfli]

Thanks for you valuable information 👍

[@AliGamerxdzostawsuba]

or just use typescript

[@codslab]

Osam👌🎉

[@codsfli]

Thanks

[@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.

[@akshaykhatri2027]

did already but the gap between images is huge, how to adjust that???

[@fiorenzacelestyn1340]

very short and helpful

[@codsfli]

Thanks

[@melaniebrown9633]

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

[@cristiandanielriosquintero7193]

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

[@codsfli]

No worries!

[@rohitrawat5536]

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

[@codsfli]

Thanks 💖. I try but need help to improve tutorial quality and interesting content. Please give me your valuable ideas to create more tutorial 🙏

[@rohitrawat5536]

@@codsfli Ok I'll think about it but currently i need your help as the slide you have made I need similar slider without spacing between images in a 3d view like a cubical shape Can you help with that

[@codsfli]

like : swiperjs.com/demos/230-effect-cube/core

[@arianhajiaghaei6774]

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

[@codsfli]

Cascadia Code. Thanks 🥹

[@israelabaho3978]

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?

[@codsfli]

install text pastry extension. ctrl+p to search the test pastry and click. Thanks for comment.

[@pranjulkushwaha8345]

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

[@codsfli]

Image preview : extension

[@sugamphirke8637]

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.

[@codsfli]

swiper js, I think not to have these options. thanks for the comment.

[@thamismedina6394]

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?

[@codsfli]

first select active slide then add double click event listener then show in modal with slide content . Thanks

[@mrays2729]

Nice video, everything is explained in detail

[@codsfli]

Thank you very much 🥰

[@aamirmuhammad9156]

suggestion: in your github repository give names to the folders without white spaces. I am trying to clone a single directory but it is not cloning probably because of this.

[@codsfli]

Thanks ❤️‍🔥

[@shakiqurrahman8010]

Bro prev img & next img are not showing! 😢

[@anonimuser1]

Very cool

[@codsfli]

Thanks 💖

[@Royal_Tagyev]

supper

[@codsfli]

Thanks

[@goodtimefilms6091]

my images are all decentralized, and the gap beetween then are to mich bigger, what i can do to solve that? i cant`t find any gap or padddingo wich does that

[@codsfli]

check swiper object inside have any spaceBetween then remove that.

[@adedoyinadeyemo-wp6jn]

This carousel design is not in the swiper demos but plugins, which must be paid for. So, how did you gain access to it, and how can i use it in my code?

[@codsfli]

It’s free, you can use your project 👍

[@hariharamanibalan4801]

font size 62% is applied to whole project if I remove that img become bigger If I am trying to apply to .swiper-slide img it wont works

[@codsfli]

Use font-size in .swiper-container

[@tinhuynh0703]

I have problem when 3 images is showed, the property loop={true} working not correctly when click button arrow-next (but arrow-prev is working normally). Can you set the images to 3 and try click to arrow-next to see the issue? Thank you!

[@codsfli]

Yeah, I see the issue that does not work 3 slides.

[@tinhuynh0703]

​@@codsfli Can you suggest another idea or libraries like this? I try many libraries but none of them work with react18.

[@codsfli]

I tried some of the libraries but it did not work properly. I suggest you try the Materialize CSS slider. I think 3 slides not work.

[@frishera]

why I can’t see the previous and next pictures, but only the current one?

[@codsfli]

You should change the Slide image size.

[@AHMEDTHAER2]

what extension do you use for this green size optimal after code thing

[@codsfli]

what's green thing ??? I can't understand!

[@aaryan_sharmaa]

I am having trouble finding the precise source code folder in the repository. Could you please let me know?

[@codsfli]

Check in the description 👍

[@Techvirologist]

Module not found: Can't resolve 'swiper/react' - i have used the import as - import { Swiper, SwiperSlide } from "swiper/react";, but the error is there - swiper/react not found. what to do, could anyone have solution.

[@codsfli]

Check swiper documentation

[@saiganeshdarni532]

try to import from swiper/modules

[@singhvimlesh]

I want show only three images so how can I move same like yours but for three imaged.

[@codsfli]

only add this three ::

[@kronisawbomorowski7337]

hey man i have trouble because my images are in column not row, i don't know how to change that

[@codsfli]

Add flex-direction: column

[@sire906]

this is really good but your css code affects my own css code it makes my work extremely big on desktop view i wonder why it happens like that

[@codsfli]

Remove html and body css. Thanks 🥰

[@priyankapatil305]

can I add progress bar as a pagination instead of dot pagination , its there any way

[@codsfli]

Check the swiper documentation you will find options.

[@itchyJaw]

Now I am experiencing weird problem maybe one of you guys experienced this. When I am trying to hide the div for Swiper its giving me a white blank screen wonder why and how to fix it.

[@codsfli]

I face the same problem. I don't know how to fix it. if anyone knows this problem solution, Please comment.

[@niloyniloy4121]

I face same problem.are you fixed the problem??

[@itchyJaw]

@@niloyniloy4121 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.

[@shakthisathish839]

Bro but image doesn't Fully set on it ,it shows only 75%. Image, i did manything but I didn't able to fix that problem can you help me

[@codsfli]

object-fit: contains;

[@3boodon]

Is this effect free ? cuz after insalling swiper I noticed that the css files for this effect are empty

[@codsfli]

Yeah it’s free

[@altairfarooque8663]

which version did you use , current version not working properly

[@codsfli]

Check source code

[@frishera]

yes, what did you do?

[@codsfli]

What ?

[@clay9600]

what is this css file that appears out of no where and it's not working for me

[@codsfli]

which CSS file?

[@clay9600]

8:00

[@codsfli]

Check in the description, I added source code link.

[@eosorto55]

my brother la que ocupaba mas te falto dejarla la opcion de automatica

[@codsfli]

Thanks for pointing that out, my brother! I appreciate your suggestion and I'll make sure to include the automatic option next time.

[@gustavogiarrusso]

Hola, me parecio muy bueno el video, quise intentarlo poner en mi aplicacion y no me queda igual, no se me ponen los estilos

[@codsfli]

Check anything miss

[@niloyniloy4121]

Your code not working, cards break large device but woking small devices..... Can you fix the problem?

[@codsfli]

Which device slides break.

[@niloyniloy4121]

@@codsfli solved bro,i can't implement your code write place..

[@codsfli]

Nice you did it 💖

[@dhanushdv3129]

@@niloyniloy4121 Wat did u do to solve that

[@dhanushdv3129]

@@niloyniloy4121 Sir plz let me know how to solve it as I am getting same

[@rifat0109]

What font family do you use ?

[@codsfli]

Where ?

[@rifat0109]

@@codsfli vscode

[@codsfli]

'Cascadia Code'

[@shreetimohapatra4142]

my screen is just being white, and none of it is getting imported

[@codsfli]

Check Swiper documention 👍

[@technical-max184]

not working bro i mean your code is working like a normal slider

[@codsfli]

Check swiper documention

[@zoropppp]

how the lil images showing on the left side

[@codsfli]

what?

[@zoropppp]

The extension Small images on the left side parallel to img ele

[@codsfli]

Extension name is : Image preview. Thanks for you valuable comments 🥰

[@edgarenriquegarciadelacruz4490]

can you make this slider in Angular 14

[@codsfli]

I will try. Thanks 💖

[@edgarenriquegarciadelacruz4490]

Thanks :D

[@chandrasekhar6049]

The swiper slowly slide in ios? Any solution

[@codsfli]

not swiper, your image size makes slow, i think.

[@chandrasekhar6049]

@@codsfli but it works fine in Android

[@codsfli]

or browser cache issue

[@laraiblaraib5634]

Hey am facing an error can you help me?

[@codsfli]

Message me in messenger

[@laraiblaraib5634]

Kindly give your id @@codsfli

[@codsfli]

facebook.com/profile.php?id=100028840303470&mibextid=ZbWKwL

[@arjunsuresh8908]

i'm just copy pasted this code .but it doesnot worked

[@codsfli]

Watch full video

[@arjunsuresh8908]

@@codsfli i didnt done any chages.the same i'm used , but not worked.could you help me please

[@codsfli]

Contact me in messenger

[@cse090priyanshmishra6]

@@arjunsuresh8908 you probably did't installed dependencies, install swiper

[@codsfli]

i think so

[@tohakhan2877]

Bro, What is vs code theme name ?

[@codsfli]

Material theme 👍

[@vinodpawar8653]

how to add 1 to 10 number for slide_images_ ? are you using plugin for that?

[@codsfli]

install text pastry extension. Thanks for comment ❤️

[@arjunsuresh8908]

Class constructor Swiper cannot be invoked without 'new' -- i'm getting error like this

[@codsfli]

download complete source code.

[@cse090priyanshmishra6]

replace you import with this --> import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';

[@hariharamanibalan4801]

autoplay is not working

[@codsfli]

Swiper has some issue 🥱

[@hieuvu4089]

maybe you should import AutoPlay module, i did not see AutoPlay module in cods's code.

[@codsfli]

yeah

[@imma_star]

should I implement it into my site? plz :)

[@codsfli]

Implement ok but not full design.

[@imma_star]

@@codsfli tnx, I should send link of my project when I deploy it

[@codsfli]

Okay

[@alifhasanshah007]

Not working.

[@codsfli]

Why?

[@011BLEACH]

what is the problem?

[@mdmodassir6932]

Hello please. I need your help

[@codsfli]

How can i help you

[@mdmodassir6932]

@@codsfli actually I am doing internship. So how can I contact you personally? Please

[@codsfli]

message me in messenger

[@mdmodassir6932]

@@codsfli your I'd ?

[@codsfli]

facebook.com/profile.php?id=100028840303470

[@thequietkid5212]

Why did I waste my time even after copying ditto its not working

[@codsfli]

I'm sorry it's not working for you, please check the swiper documentation.

[@jaihind6401]

Waste of time ...

[@codsfli]

Why 🥹

[@jaihind6401]

@@codsfli your code is not work I have wasted my 2-3hr but still not got any solution 🥲

[@codsfli]

You check the swiper documentation, why are you wasting your time on KZbin?

[@spotterofabuja]

Waste of time

[@codsfli]

why ?