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

Подписаться 3,5 тыс.

Просмотров 148 тыс.

50% 1

🥰 Join this channel to get access to perks 👇:
/ @codsfli
☕ www.buymeacoffee.com/cods
🔗 Source code
github.com/emetdas/RU-vid-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

Опубликовано:

5 фев 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 184

@cse090priyanshmishra6 11 месяцев назад

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 11 месяцев назад

Thanks for sharing your knowledge.

@prasanjitsarker2589 11 месяцев назад

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

@ojonugwamartinsonogu3319 8 месяцев назад

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

@hubertlayle6812 5 месяцев назад

@@prasanjitsarker2589 nothing?

@DProgram-xb9pp 3 месяца назад

Mod is not a function

@8koi245 Год назад

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

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

@visualgraphics2235 Год назад

I always learn something new from your videos.👌

@codsfli Год назад

Glad to hear that!

@matiasvargas1729 Год назад

Wow! That is a pretty cool slider

@codsfli Год назад

Thanks 🙏

@earnstein7607 7 месяцев назад

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 7 месяцев назад

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

@earnstein7607 7 месяцев назад

@@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 7 месяцев назад

Thanks 🥰

@melaniebrown9633 2 месяца назад

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

@thiernodem5681 4 месяца назад

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 4 месяца назад

Thanks for you valuable information 👍

@AliGamerxdzostawsuba 5 дней назад

or just use typescript

@sampletayo 6 месяцев назад

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 6 месяцев назад

Fantastic!

@spryzen001 6 месяцев назад

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

@techlightdev Год назад

So cool and amazing tutorial. Thank you

@codsfli Год назад

Thanks

@Ankii_kumar Год назад

Great work ❤

@codsfli Год назад

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.

@salmabt6204 Год назад

great work ! thank you

@codsfli Год назад

Thank you too!

@user-rv1bx8hx4v 7 месяцев назад

Thank you! Great video

@codsfli 7 месяцев назад

Thank you so much 🥰

@pranjulkushwaha8345 Год назад

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

@codsfli Год назад

Image preview : extension

@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

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

@shakiqurrahman8010 11 месяцев назад

Bro prev img & next img are not showing! 😢

@fiorenzacelestyn1340 Месяц назад

very short and helpful

@codsfli Месяц назад

Thanks

@goodtimefilms6091 11 месяцев назад

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 11 месяцев назад

check swiper object inside have any spaceBetween then remove that.

@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 8 месяцев назад

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

@codslab Год назад

Osam👌🎉

@codsfli Год назад

Thanks

@cristiandanielriosquintero7193 10 месяцев назад

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

@codsfli 10 месяцев назад

No worries!

@mrays2729 8 месяцев назад

Nice video, everything is explained in detail

@codsfli 8 месяцев назад

Thank you very much 🥰

@AHMEDTHAER2 9 месяцев назад

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

@codsfli 9 месяцев назад

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

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

@aaryan_sharmaa 2 месяца назад

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

@codsfli 2 месяца назад

Check in the description 👍

@hariharamanibalan4801 11 месяцев назад

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 11 месяцев назад

Use font-size in .swiper-container

@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

@priyankapatil305 7 месяцев назад

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

@codsfli 7 месяцев назад

Check the swiper documentation you will find options.

@arianhajiaghaei6774 Год назад

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

@codsfli Год назад

Cascadia Code. Thanks 🥹

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

@kronisawbomorowski7337 8 месяцев назад

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

@codsfli 8 месяцев назад

Add flex-direction: column

@frishera Год назад

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

@codsfli Год назад

You should change the Slide image size.

@anonimuser1 Год назад

Very cool

@codsfli Год назад

Thanks 💖

@Techvirologist 4 месяца назад

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 4 месяца назад

Check swiper documentation

@saiganeshdarni532 Месяц назад

try to import from swiper/modules

@shakthisathish839 6 месяцев назад

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 6 месяцев назад

object-fit: contains;

@singhvimlesh Год назад

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

@codsfli Год назад

only add this three ::

@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

@aamirmuhammad9156 10 месяцев назад

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 10 месяцев назад

Thanks ❤️‍🔥

@3boodon 9 месяцев назад

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

@codsfli 9 месяцев назад

Yeah it’s free

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

@altairfarooque8663 Год назад

which version did you use , current version not working properly

@codsfli Год назад

Check source code

@frishera Год назад

yes, what did you do?

@codsfli Год назад

What ?

@sire906 8 месяцев назад

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 8 месяцев назад

Remove html and body css. Thanks 🥰

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

@rifat0109 10 месяцев назад

What font family do you use ?

@codsfli 10 месяцев назад

Where ?

@rifat0109 10 месяцев назад

@@codsfli vscode

@codsfli 10 месяцев назад

'Cascadia Code'

@Royal_Tagyev 8 месяцев назад

supper

@codsfli 8 месяцев назад

Thanks

@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

@vinodpawar8653 9 месяцев назад

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

@codsfli 9 месяцев назад

install text pastry extension. Thanks for comment ❤️

@eosorto55 7 месяцев назад

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

@codsfli 7 месяцев назад

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

@shreetimohapatra4142 5 месяцев назад

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

@codsfli 5 месяцев назад

Check Swiper documention 👍

@edgarenriquegarciadelacruz4490 Год назад

can you make this slider in Angular 14

@codsfli Год назад

I will try. Thanks 💖

@edgarenriquegarciadelacruz4490 Год назад

Thanks :D

@tohakhan2877 2 месяца назад

Bro, What is vs code theme name ?

@codsfli 2 месяца назад

Material theme 👍

@zoropppp 7 месяцев назад

how the lil images showing on the left side

@codsfli 7 месяцев назад

what?

@zoropppp 7 месяцев назад

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

@codsfli 7 месяцев назад

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

@laraiblaraib5634 8 месяцев назад

Hey am facing an error can you help me?

@codsfli 8 месяцев назад

Message me in messenger

@laraiblaraib5634 8 месяцев назад

Kindly give your id @@codsfli

@codsfli 8 месяцев назад

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

@chandrasekhar6049 10 месяцев назад

The swiper slowly slide in ios? Any solution

@codsfli 10 месяцев назад

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

@chandrasekhar6049 10 месяцев назад

@@codsfli but it works fine in Android

@codsfli 10 месяцев назад

or browser cache issue

@arjunsuresh8908 11 месяцев назад

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

@codsfli 11 месяцев назад

download complete source code.

@cse090priyanshmishra6 11 месяцев назад

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

@technical-max184 2 месяца назад

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

@codsfli 2 месяца назад

Check swiper documention

@arjunsuresh8908 11 месяцев назад

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

@codsfli 11 месяцев назад

Watch full video

@arjunsuresh8908 11 месяцев назад

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

@codsfli 11 месяцев назад

Contact me in messenger

@cse090priyanshmishra6 11 месяцев назад

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

@codsfli 11 месяцев назад

i think so

@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

@hariharamanibalan4801 10 месяцев назад

autoplay is not working

@codsfli 10 месяцев назад

Swiper has some issue 🥱

@hieuvu4089 10 месяцев назад

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

@codsfli 10 месяцев назад

yeah

@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

@alifhasanshah007 6 месяцев назад

Not working.

@codsfli 6 месяцев назад

Why?

@011BLEACH 4 месяца назад

what is the problem?

@thequietkid5212 8 месяцев назад

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

@codsfli 8 месяцев назад

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

@jaihind6401 7 месяцев назад

Waste of time ...

@codsfli 7 месяцев назад

Why 🥹

@jaihind6401 7 месяцев назад

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

@codsfli 7 месяцев назад

You check the swiper documentation, why are you wasting your time on RU-vid?

@spotterofabuja 10 месяцев назад

Waste of time

@codsfli 10 месяцев назад

why ?