I just wanted to say I've discovered your tutorials not too long ago but the amount of videos I've watched and learn from you I will always appreciate and never forget. Thank you so much!
I'm speechless... I was trying to make this behavior in my React App by myself but I couldn't... Bro, you saved me! Thanks a Lot! I will implement on this way! Thanks again! SwiperJs is majestic!!
I coded along with you and this project works!! I couldn't get the little bullets under the images to show up but everything else worked fine! Thank you for an easy code-along. I appreciate you!
@@CodingLabYT your styling is really cool. But it's just that we don't understand what's happening, like why you use that (certain) css property? Why do we need to do this? Because you dont talk.
For people who cant make it responsive, you can use this (like media queries but you can only edit slidesPerView, spaceBetween): breakpoints: { 640: { slidesPerView: 2, spaceBetween: 20, }, 768: { slidesPerView: 3, spaceBetween: 0, }, 1024: { slidesPerView: 4, spaceBetween: 0, }, },
Do you guys really think that he taught you something valuable? He doesn't know what he is doing, he is just unnecessarily nesting the divs element without having a property understanding and clarity
Hey so when I go try to find infinite loop with slides per group it is not appearing on the swiper.js website how can I fix this? The part of the video I am referring to is 12:55
In swiper js website Infinite loop with slides per group is not there , BUT you can use simple infinite loop and change the "slidesPerView : 1 " to "slidesPerView : 3 " or the amount of you want in the scripth.
THANK YOU!!! TNice tutorials is such an amazing tutorial. I just got soft soft today and was playing around on it but had no clue how to really use it.
Great tutorial. Learned a lot (especially your shortcuts - didn't get that in my paid courses haha) would love some more of these using the current version of Swiper. Also a video on your thoughts about Swiper would be cool. Thank you and thanks for you great content.
My card fills the entire container, I have tried for hours to get this to work. My prev and next buttons wont work either and I can't slide with the mouse
In swiper js website Infinite loop with slides per group is not there , BUT you can use simple infinite loop and change the "slidesPerView : 1 " to "slidesPerView : 3 " or the amount of you want in the scripth.
This tutorial is good, i was able to learn something but the spaces between the cards did not come also the cards are not swiping as expected. if theres any way you assist me please.
2 ways:- 1- use an array of objects for the content and add an event listener with the function to work on the array of object . 2- use arrays only but this will take a lot of time.
Please follow the steps exactly how he will do. in swiper download the version same as he downloads and make separate file for css and javascript to get correct output for slider
amigo excelentu tutorial, pero en esta parte cuando lo quito funciona el automatico a pasar las imagenes, pero cuando lo dejo ya se detiene que problema hay ahi ?
hi bro , i dont know why when i clicked on the view more button of the second card it slide to the next card , whats the problem? how can i remove this
i have defenetely the same files and i don't understand where does my mistake comes from. let met explain : in summary, i only have one element that i cannot swipe.
Hello, I need help. I did everything same as in video, but when I click on button View More on central card (In my case Choose Team) then all slides slide. Effect is same like I click pagination dot below, how can I change that? I want to go on another page when I click that button, but that doesnt work, only work if I am in the last pagination dot, or If I click button on first card, but on the second card and third card when I click, doesnt work. I hope you understand my question. :)
After downloading swiper-bundle.min.css my output is not changing as in video any suggestions where I may did mistake and before that everything is working
In swiper js website Infinite loop with slides per group is not there , BUT you can use simple infinite loop and change the "slidesPerView : 1 " to "slidesPerView : 3 " or the amount of you want in the scripth.
hii everone, if someones code is not working, please check that you should have given links of slider files before your own css and js file links 11:57
I just did the 1st one yesterday and had to update the slider js part by 2 lines missing from the video, I assume by the time that has gone by. Also had to add 1 level of nesting and give card its own space after swiper-slide.
bro you are pro developer.....many student got benifits of it ...superb
I just wanted to say I've discovered your tutorials not too long ago but the amount of videos I've watched and learn from you I will always appreciate and never forget. Thank you so much!
I'm speechless... I was trying to make this behavior in my React App by myself but I couldn't... Bro, you saved me! Thanks a Lot! I will implement on this way! Thanks again!
SwiperJs is majestic!!
Man I love TH-cam a lot. It introduces a lot of creative people.
you deserve my appreciation.
Thankyou so much.
I coded along with you and this project works!! I couldn't get the little bullets under the images to show up but everything else worked fine! Thank you for an easy code-along. I appreciate you!
TE PASASTE UN DIV DEBERIA ESTAR DENTRO DEL SLIDE-CONTENT
This is very helpful but Please try to add your own voice with explanation .
Thank you for your kind suggestion. I will think about it.
@@CodingLabYT your styling is really cool. But it's just that we don't understand what's happening, like why you use that (certain) css property? Why do we need to do this? Because you dont talk.
@@CodingLabYT please think fast sirji
@@winter8136 😊
@@CodingLabYT yes sir it will helpful we can't follow with your flow
What an amazing project great video Sir 👏👏
Glad to hear that.
For people who cant make it responsive, you can use this (like media queries but you can only edit slidesPerView, spaceBetween):
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 0,
},
1024: {
slidesPerView: 4,
spaceBetween: 0,
},
},
Adamsın dogukan
@@enezinho2222 teşekkürler dostum
can you please tell how can i display 4 cards instead of 3
@@vijendrapandey1830 all you need to do set slidesPerView to 3 in which screen size you want
@@ahmetdogukankonuk not working
The Best Content , i love You Bro
Thank sir , you are my life on TH-cam platforms
Because I have learn many code see your video.
Big fan sir
It's my pleasure
i was trying to find a way to make those slider's responsive, to my lucky i found ur video, ty so much!
the best video I’ve ever seen, thankssss!
Glad you liked it!
definitely diving into your videos. Thank you so much for taking the ti to teach us that are green in the field. Have a great day
Do you guys really think that he taught you something valuable? He doesn't know what he is doing, he is just unnecessarily nesting the divs element without having a property understanding and clarity
Thank You Broooo.... For Teaching Slider In html Css ❤❤❤❤❤
An excellent video turned out, everything is well thought out, a very clear instruction turned out)))
Glad you liked it!
Hey so when I go try to find infinite loop with slides per group it is not appearing on the swiper.js website how can I fix this? The part of the video I am referring to is 12:55
In swiper js website Infinite loop with slides per group is not there , BUT you can use simple infinite loop and change the "slidesPerView : 1 " to "slidesPerView : 3 " or the amount of you want in the scripth.
THANK YOU!!! TNice tutorials is such an amazing tutorial. I just got soft soft today and was playing around on it but had no clue how to really use it.
You are so welcome!
@@CodingLabYT can you provide the code
Great sir you are awsome 💕❤️😊
Thank you so much 😀
Sir i am 16 years old and very much interested in web developing
You are my best teacher sir, i want be become your student
Superb superb and superb!!!!!!!!!!!!!!!!!!
Thanks 🔥
Great tutorial. Learned a lot (especially your shortcuts - didn't get that in my paid courses haha) would love some more of these using the current version of Swiper. Also a video on your thoughts about Swiper would be cool. Thank you and thanks for you great content.
kudos to you bro!!!!
Nice tutorial, i just cracked soft soft ;)
Good to hear!
that is extremely helpful♥
Glad it was helpful!
cool keep it up bro
sure I will
Thank you very much! This help me a lot!!
My card fills the entire container, I have tried for hours to get this to work. My prev and next buttons wont work either and I can't slide with the mouse
i have the same problem please how did you fix it
add overflow:auto in index.css
in swiper js website the option the infinite loops one is not coming
In swiper js website Infinite loop with slides per group is not there , BUT you can use simple infinite loop and change the "slidesPerView : 1 " to "slidesPerView : 3 " or the amount of you want in the scripth.
Excellent video. Thank you so much.
You are welcome!
When I put swiper-slide on the card div, its making the card take up the whole width of the container??
Same
thank you for the video, it's helpful!
Glad it was helpful!
love to see this in tailwind too!
Thanks this is very helpful 😊
you are really brilliant
Thanks a lot for this video👍🏻👍🏻👍🏻
My pleasure 😊
Why on 4:20 - border: 4px solid #4070f4 do not work without !important; ?
This tutorial is good, i was able to learn something but the spaces between the cards did not come also the cards are not swiping as expected. if theres any way you assist me please.
Thanks ! Really helpful.❤
Glad it was helpful!
Hi do you have the swiperjs code?
@@divyaangane5304 yup . I have it . I integrated it in my website. Works perfectly.
Excellent
Thank you! Cheers!
👏 EXCELENTE
when I use the grid system everything overflows, maybe it is not compatible with the grid or is it an error in my code? thx for video
Thanks alot bro....it helps alot ❤🤍🌹🌹🌹
Always welcome
I'm wondering, what if it's made automatically?,does it need to be reset all?
really great work, thank you
Glad you liked it!
It was useful. Thank you ❤️
Glad it was helpful!
You have no idea how grateful I am for tNice tutorials series
hi when i click on the buttons it moves the slider to right. how i can make it just a normal button??
you can take source code, link is in description.
I cannot color the bullets from pagination.The selector .swiper-pagination-bullet doesn't work. Any ideas ?
Had the same problem, solved by switchin the "." for "-" before "bullet" in the css: .swiper-pagination-bullet{
there is a way to create this effect without using SwiperJs, just with pure JavaScript ?
I have been trying to figure out how to do this as well
@@ultimultig I managed to do something similar only with JS but I was not satisfied
2 ways:- 1- use an array of objects for the content and add an event listener with the function to work on the array of object .
2- use arrays only but this will take a lot of time.
when I set the slidesPerView to auto or whatever value. it puts the 1st item as last. the second item is displayed first
You can take source code from my website link is in description
when i took the colours grey and red out at the end the arrows disappeared how come?
really helpful
How can I make it look like this as when someone add a new name, description and pic using javascript and inputs?
Complete js in one vid from beginning plz and sorry for not commenting bcoz my phone drowned in water but now 😎😎
Thanks for the tutorial
Any time
Awesome video +++++++++++++ 🙂
Thank you! Cheers!
Please follow the steps exactly how he will do. in swiper download the version same as he downloads and make separate file for css and javascript to get correct output for slider
amigo excelentu tutorial, pero en esta parte cuando lo quito funciona el automatico a pasar las imagenes, pero cuando lo dejo ya se detiene que problema hay ahi ?
are there variable that can make it autoSlider ?
add this code for auto slider - autoplay: {
delay: 2500,
disableOnInteraction: false,
},
@@CodingLabYT thank you so much it works🤩
@@CodingLabYT gracias me sirivio mucho.
Holy mother of god somehow you always upload a video on the topic I need currently. Source code tho, how soon will it be there?
Source code link will be uploaded soon.
hi bro , i dont know why when i clicked on the view more button of the second card it slide to the next card , whats the problem? how can i remove this
Thank you so much!
If i want to copy and past multiple rows of these how could i stop the button from making all of them scroll
I'm blocked with the js script, it doesn't work for me ...
thank you very much !
i have defenetely the same files and i don't understand where does my mistake comes from. let met explain : in summary, i only have one element that i cannot swipe.
You can take all the source code file form my website, link is in description.
@@CodingLabYT i wish i could do so. but the web site doesn't allow me to download it because of an adblock extension that i even don't have.
THANK YOU!!))
You're welcome!
tava funcionando tudo normal, chegou no javascript, deu errado
Nice
Hello, I need help. I did everything same as in video, but when I click on button View More on central card (In my case Choose Team) then all slides slide. Effect is same like I click pagination dot below, how can I change that? I want to go on another page when I click that button, but that doesnt work, only work if I am in the last pagination dot, or If I click button on first card, but on the second card and third card when I click, doesnt work. I hope you understand my question. :)
You can take all the source code form my website link is in the description.
I fix it, it was bug with localhost. Everything works fine 😁
How did you fix it. Can you please help. I'm also facing the same.
The swiper won't work
with dropdown
How to quickly enter the new line to write code instead of click -> button?
CTRL + Enter
It didn't work for me
The page keeps going blank
You can download all source files, link is in description.
Sir i love your video please add your voice especially in js video
Glad you liked them.
After downloading swiper-bundle.min.css my output is not changing as in video any suggestions where I may did mistake and before that everything is working
Hi.. I wanted the same design but seems swiperjs has removed the infinite loop with multiple div design... can i please get your code?
you can still use it by searching "swiperjs infinite loop with slides per group" on google
In swiper js website Infinite loop with slides per group is not there , BUT you can use simple infinite loop and change the "slidesPerView : 1 " to "slidesPerView : 3 " or the amount of you want in the scripth.
The video is very nice, must it would have been more better it it was a little slower and explanation for beginners
Ok next time
What brain do you havee my gasssh 😫 This is really amazing! Thank youuuu!
I'm glad you like it
@@CodingLabYT I'm a new fan!
🥰
How too automatically fetch data from json file?? Please reply
my swiper-pagination at some point disappear and I dont know why :(
You can take all the source code from my website. Link is in description.
Thank you so much
You're most welcome
i cant find the buttom of slider ! next and previous !
swiperjs is still working? because I cannot make it works :(
What if we want multiple slider in one html file how to do that
I have only 3 card will my card move on recycle
i dont know somehow I cannot change the color of the next and prev arrows buttons, it just doesnt work anymore i guess
Where agent finds that name in CSS. @import ...
In my latest video,I have shown how to import fonts and icons.
i'm new in angular typescript can this work in angular
increíble tutorial, muy bueno
Glad you liked it.
hii everone, if someones code is not working, please check that you should have given links of slider files before your own css and js file links 11:57
how can i hange the arrow color ?
never guys never trie to learn such a big code
try always small and ese wayy
Is there the code on github or codepen?
Can I replace the arrow (swiper-navBtn) with an image?
From where to get images ?
trust me bro on spite of that I don't know who are you but I love you more than those who I know💙
Thank you so much. Best regards from my side.
I want 3 sections with the same functionality, how to do it?? Also how to change the width of every card
Duplicate the slide container three times. To expand the cards width, increase the slide container width
I just did the 1st one yesterday and had to update the slider js part by 2 lines missing from the video, I assume by the time that has gone by. Also had to add 1 level of nesting and give card its own space after swiper-slide.
Maravilha aprendi muito
amazing
How can I download code for card slider