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';
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.
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
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".
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
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?
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.
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.
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.
nose si me puedes ayudar, pero al usar tu codigo, en la pantalla de mobil tengo una franja blanca que sobrepasa el html, nose si sabes solucionarlo y si me puedes ayudar lo agradeceria I don't know if you can help me, but when I use your code, on the mobile screen I have a white strip that goes over the html, I don't know if you know how to solve it and if you can help me I would appreciate it.
Check your dev tools; watch for changes between the mobile size and desktop size to isolate where the error is occurring. Report back when you've identified the problem; I'll try to help.
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?
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!
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
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 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
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.
@@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.
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?
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.
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.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
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';
Thanks for sharing your knowledge.
full screen slider gap much more, how can i fixed?
Did you find a
work around for this?@@prasanjitsarker2589
@@prasanjitsarker2589 nothing?
Mod is not a function
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.
For people like you I still make videos. Many Many Thanks for your support 🥰
@@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.
Thanks 🥰
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
Thanks for you valuable information 👍
or just use typescript
Swiper's documentation is very annoying to deal with. So I appreciate you uploading this; it helps a lot with grasping their intended workflow.
Thanks 🥰
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".
Thanks for sharing your knowledge. many many thanks, bro.
Sheesh looks lovely in the start, can't wait to see who it was done
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
Glad it helped!
thank you ! your comment saved me :)
can you help me with that please?
si! Tienes mucha razón
I always learn something new from your videos.👌
Glad to hear that!
Wow!
That is a pretty cool slider
Thanks 🙏
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?
install text pastry extension. ctrl+p to search the test pastry and click. Thanks for comment.
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.
did already but the gap between images is huge, how to adjust that???
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.
Fantastic!
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.
I want show only three images so how can I move same like yours but for three imaged.
only add this three ::
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.
swiper js, I think not to have these options. thanks for the comment.
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
Use font-size in .swiper-container
why I can’t see the previous and next pictures, but only the current one?
You should change the Slide image size.
nose si me puedes ayudar, pero al usar tu codigo, en la pantalla de mobil tengo una franja blanca que sobrepasa el html, nose si sabes solucionarlo y si me puedes ayudar lo agradeceria
I don't know if you can help me, but when I use your code, on the mobile screen I have a white strip that goes over the html, I don't know if you know how to solve it and if you can help me I would appreciate it.
Re-start the project, I hope it will work 👍
Check your dev tools; watch for changes between the mobile size and desktop size to isolate where the error is occurring. Report back when you've identified the problem; I'll try to help.
Thank you very much, it worked! How do I hide the following slides so that only the previous ones (left) are visible?
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?
first select active slide then add double click event listener then show in modal with slide content . Thanks
Nice tutorial ,
which extension you are using that shows imported image's preview in left side ?
Image preview : extension
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!
Yeah, I see the issue that does not work 3 slides.
@@codsfli Can you suggest another idea or libraries like this? I try many libraries but none of them work with react18.
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.
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
check swiper object inside have any spaceBetween then remove that.
Bro prev img & next img are not showing! 😢
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
Thanks 💖. I try but need help to improve tutorial quality and interesting content. Please give me your valuable ideas to create more tutorial 🙏
@@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
like : swiperjs.com/demos/230-effect-cube/core
can you make this slider in Angular 14
I will try. Thanks 💖
Thanks :D
hey can u create tutorial same Carousel but using embale-carousel-react library ?
Okay 👍
So cool and amazing tutorial. Thank you
Thanks
can I add progress bar as a pagination instead of dot pagination , its there any way
Check the swiper documentation you will find options.
how the lil images showing on the left side
what?
The extension
Small images on the left side parallel to img ele
Extension name is : Image preview.
Thanks for you valuable comments 🥰
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.
I face the same problem. I don't know how to fix it. if anyone knows this problem solution, Please comment.
I face same problem.are you fixed the problem??
@@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.
what extension do you use for this green size optimal after code thing
what's green thing ??? I can't understand!
did you styling by creating vanila css?
Yeah
bro you really deserve a like . what is your vs code font ?
Cascadia Code. Thanks 🥹
Very cool
Thanks 💖
what is this css file that appears out of no where and it's not working for me
which CSS file?
8:00
Check in the description, I added source code link.
hey man i have trouble because my images are in column not row, i don't know how to change that
Add flex-direction: column
What font family do you use ?
Where ?
@@codsfli vscode
'Cascadia Code'
Great work ❤
Thanks 💖
Your code not working, cards break large device but woking small devices.....
Can you fix the problem?
Which device slides break.
@@codsfli solved bro,i can't implement your code write place..
Nice you did it 💖
@@niloyniloy4121 Wat did u do to solve that
@@niloyniloy4121 Sir plz let me know how to solve it as I am getting same
bro, ctrl + click then localhost 5173 open in the browser but its not working please help
I think node are not running 🤔
@@codsfli I have node ! but still not working ,,,, please help me
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?
It’s free, you can use your project 👍
Hola, me parecio muy bueno el video, quise intentarlo poner en mi aplicacion y no me queda igual, no se me ponen los estilos
Check anything miss
I am having trouble finding the precise source code folder in the repository. Could you please let me know?
Check in the description 👍
which version did you use , current version not working properly
Check source code
yes, what did you do?
What ?
thank you for the tip
Thanks
You are very good at what you do, but it will be nice or should I nicer if you explain along the code you are writing.
Yeah, I am planning in future 😍
great work ! thank you
Thank you too!
thank you very much! It wat totally helpful! even thougth my card dont centralize 😄
No worries!
Thank you! Great video
Thank you so much 🥰
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.
Check swiper documentation
try to import from swiper/modules
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
object-fit: contains;
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
Remove html and body css. Thanks 🥰
Hey am facing an error can you help me?
Message me in messenger
Kindly give your id
@@codsfli
facebook.com/profile.php?id=100028840303470&mibextid=ZbWKwL
i'm just copy pasted this code .but it doesnot worked
Watch full video
@@codsfli i didnt done any chages.the same i'm used , but not worked.could you help me please
Contact me in messenger
@@arjunsuresh8908 you probably did't installed dependencies, install swiper
i think so
The swiper slowly slide in ios? Any solution
not swiper, your image size makes slow, i think.
@@codsfli but it works fine in Android
or browser cache issue
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.
Thanks ❤️🔥
Bro, What is vs code theme name ?
Material theme 👍
Is this effect free ? cuz after insalling swiper I noticed that the css files for this effect are empty
Yeah it’s free
autoplay is not working
Swiper has some issue 🥱
maybe you should import AutoPlay module, i did not see AutoPlay module in cods's code.
yeah
how to add 1 to 10 number for slide_images_ ? are you using plugin for that?
install text pastry extension. Thanks for comment ❤️
Hello please. I need your help
How can i help you
@@codsfli actually I am doing internship. So how can I contact you personally? Please
message me in messenger
@@codsfli your I'd ?
facebook.com/profile.php?id=100028840303470
very short and helpful
Thanks
my screen is just being white, and none of it is getting imported
Check Swiper documention 👍
Thank for you. Bro
Welcome ☺️
Class constructor Swiper cannot be invoked without 'new' -- i'm getting error like this
download complete source code.
replace you import with this --> import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';
not working bro i mean your code is working like a normal slider
Check swiper documention
Not working.
Why?
what is the problem?
my brother la que ocupaba mas te falto dejarla la opcion de automatica
Thanks for pointing that out, my brother! I appreciate your suggestion and I'll make sure to include the automatic option next time.
should I implement it into my site? plz :)
Implement ok but not full design.
@@codsfli tnx, I should send link of my project when I deploy it
Okay
Error:
× the name `Swiper` is defined multiple times
╭─[/Users/niyas/Desktop/Cidbi/cidbe-user-next/src/app/product-deatiles/Slider.jsx:1:1]
1 │ import Swiper from 'swiper'
· ───┬──
· ╰── previous definition of `Swiper` here
2 │ import 'swiper/dist/css/swiper.css'
3 │ import 'swiper/modules/effect-coverflow/effect-coverflow.min.css';
4 │ import 'swiper/modules/pagination/pagination.min.css';
5 │ import 'swiper/modules/navigation/navigation.min.css';
6 │ import { Swiper, SwiperSlide } from 'swiper/react';
· ───┬──
· ╰── `Swiper` redefined here
7 │ import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';
8 │ import sliderImg1 from '../../../public/images/product-view/slider/Slide Image (1).svg';
9 │ import sliderImg2 from '../../../public/images/product-view/slider/Slide Image (2).svg';
╰────
error
Update swiper
Nice
Thanks 😍
Osam👌🎉
Thanks
Why did I waste my time even after copying ditto its not working
I'm sorry it's not working for you, please check the swiper documentation.
Nice video, everything is explained in detail
Thank you very much 🥰
Waste of time
why ?
Waste of time ...
Why 🥹
@@codsfli your code is not work I have wasted my 2-3hr but still not got any solution 🥲
You check the swiper documentation, why are you wasting your time on UA-cam?