How to make Responsive Card Slider in HTML CSS & JavaScript | SwiperJs
Вставка
- Опубліковано 18 вер 2024
- How to make Responsive Card Slider in HTML CSS & JavaScript | SwiperJs
In this video, I have to build a Responsive Card Slider using HTML CSS and JavaScript, and swiperjs. You can slide cards by clicking on the nav button and cursor and I have also added pagination. This project is fully responsive and fits all media devices.
---
🗂️ Get Source Code of this Card Slider
➤ buymeacoffee.c...
🌐 Visit CodingNepal for helpful coding projects
➤ www.codingnepa...
⭐ Hire me on Fiverr
➤ www.fiverr.com...
📷 Follow me on Instagram
➤ / coding.np
🤝 Support my work with a coffee
➤ buymeacoffee.c...
#Card_Slider #Sliding_Card #html_css_javascript
---
🎵 Music Credit:
Deep Sea by Vendredi / vendrediduo
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/-deep-sea
Music promoted by Audio Library • Deep Sea - Vendredi (N...
Something 'bout July (Instrumental) by RYYZN
Free Download / Stream: bit.ly/-_someth...
Music promoted by Audio Library • Something 'bout July (...
Song: Ehrling - You And Me (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
➤ Video Link: • Ehrling - You And Me (...
Song: Ikson - We Are Free (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
➤ Video Link: • Ikson - We Are Free (V...
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!
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
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
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!
TE PASASTE UN DIV DEBERIA ESTAR DENTRO DEL SLIDE-CONTENT
Man I love UA-cam a lot. It introduces a lot of creative people.
you deserve my appreciation.
Thankyou so much.
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!!! 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
What an amazing project great video Sir 👏👏
Glad to hear that.
Thank sir , you are my life on UA-cam platforms
Because I have learn many code see your video.
Big fan sir
It's my pleasure
An excellent video turned out, everything is well thought out, a very clear instruction turned out)))
Glad you liked it!
i was trying to find a way to make those slider's responsive, to my lucky i found ur video, ty so much!
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.
Thank You Broooo.... For Teaching Slider In html Css ❤❤❤❤❤
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
The Best Content , i love You Bro
Excellent video. Thank you so much.
You are welcome!
Nice tutorial, i just cracked soft soft ;)
Good to hear!
thank you for the video, it's helpful!
Glad it was helpful!
love to see this in tailwind too!
Thank you very much! This help me a lot!!
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
you are really brilliant
Superb superb and superb!!!!!!!!!!!!!!!!!!
Thanks 🔥
cool keep it up bro
sure I will
the best video I’ve ever seen, thankssss!
Glad you liked it!
kudos to you bro!!!!
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!
🥰
When I put swiper-slide on the card div, its making the card take up the whole width of the container??
Same
in swiper js website the option the infinite loops one is not coming
never guys never trie to learn such a big code
try always small and ese wayy
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
that is extremely helpful♥
Glad it was helpful!
Excellent
Thank you! Cheers!
Thanks this is very helpful 😊
You have no idea how grateful I am for tNice tutorials series
Maravilha aprendi muito
👏 EXCELENTE
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
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 for the tutorial
Any time
Thanks a lot for this video👍🏻👍🏻👍🏻
My pleasure 😊
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.
Thank you so much
You're most welcome
thank you very much !
really great work, thank you
Glad you liked it!
It was useful. Thank you ❤️
Glad it was helpful!
Thank you so much!
Stick with it it gets easy over ti
THANK YOU!!))
You're welcome!
really helpful
Nice
Thank You
It didn't work for me
The page keeps going blank
You can download all source files, link is in description.
Thanks alot bro....it helps alot ❤🤍🌹🌹🌹
Always welcome
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
amazing
was struggling to keep this button outside thanks
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.
thanks you so much brother
Most welcome
Thank you
You're welcome
thank you so much
You're welcome!
lo he logrado , gracias
Complete js in one vid from beginning plz and sorry for not commenting bcoz my phone drowned in water but now 😎😎
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.
increíble tutorial, muy bueno
Glad you liked it.
Sir i love your video please add your voice especially in js video
Glad you liked them.
Can you make full crash video on properties to use,to initially make your website response with little work at media queries
Awesome video +++++++++++++ 🙂
Thank you! Cheers!
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.
thx buddy
You're welcome!
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.
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{
The swiper won't work
with dropdown
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.
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
How to quickly enter the new line to write code instead of click -> button?
CTRL + Enter
Thankyou very much your content help a lot😊.Can i use it in a website?they wil not claim copyright?please tell
source code please?
I'm wondering, what if it's made automatically?,does it need to be reset all?
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
Hey @CodingLab can you make such tutorials on react? Please make of you can 🙂
Dude, can you make a sidebar with submenu and dark/light mode?😅
Already uploaded.
I'm blocked with the js script, it doesn't work for me ...
i dont know somehow I cannot change the color of the next and prev arrows buttons, it just doesnt work anymore i guess
hi bro can u make a video "showing selected menu and submenu dynamically after page reload"
is learning HTML, CSS,Js in future is good?
Ya sure
It's the basis, wothout it you cannot start to learn something really usual.
Excellent video. Thank you so much. but when i host my website the picture don't show
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.
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 ?
hello, how to make filtering buttons that will list the people on these cards according to their city, district and profession? Can you make a sample video?
It's very useful but this not vanilla javascript use of framework and library method
here is the tutorial - ua-cam.com/video/6QE8dXq9SOE/v-deo.html
I guarantee tNice tutorials - I am going to pursue soft one way or another. It is my dream to make art that inspires people and shows them so
Thanks a ton. All the best.
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
How can I make it look like this as when someone add a new name, description and pic using javascript and inputs?
when i took the colours grey and red out at the end the arrows disappeared how come?
If i want to copy and past multiple rows of these how could i stop the button from making all of them scroll
Where agent finds that name in CSS. @import ...
In my latest video,I have shown how to import fonts and icons.
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.