How to make Responsive Card Slider in HTML CSS & JavaScript | SwiperJs
HTML-код
- Опубликовано: 25 май 2022
- 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.
---
Hire us on Fiverr
➤ www.fiverr.com/prakashahi
Follow me on Instagram
➤ / coding.np
Visit my website for helpful coding projects with source code
➤ www.codingnepalweb.com/respon...
#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/-_something-bout-july
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...
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!
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
bro you are pro developer.....many student got benifits of it ...superb
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.
i was trying to find a way to make those slider's responsive, to my lucky i found ur video, ty 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
An excellent video turned out, everything is well thought out, a very clear instruction turned out)))
Glad you liked it!
When I put swiper-slide on the card div, its making the card take up the whole width of the container??
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!!
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
Man I love RUclips a lot. It introduces a lot of creative people.
you deserve my appreciation.
Thankyou 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
love to see this in tailwind too!
Excellent video. Thank you so much.
You are welcome!
Thank you very much! This help me a lot!!
What an amazing project great video Sir 👏👏
Glad to hear that.
Thank You Broooo.... For Teaching Slider In html Css ❤❤❤❤❤
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.
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
Thank sir , you are my life on RUclips platforms
Because I have learn many code see your video.
Big fan sir
It's my pleasure
The Best Content , i love You Bro
the best video I’ve ever seen, thankssss!
Glad you liked it!
Thanks this is very helpful 😊
thank you for the video, it's helpful!
Glad it was helpful!
It was useful. Thank you ❤️
Glad it was helpful!
hello, how can we filter these profile cards by city and district location with select options?
Maravilha aprendi muito
You have no idea how grateful I am for tNice tutorials series
kudos to you bro!!!!
Can you use two different swiper slides without CSS and js conflicting
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!
in swiper js website the option the infinite loops one is not coming
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?
If i want to copy and past multiple rows of these how could i stop the button from making all of them scroll
👏 EXCELENTE
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
thank you very much !
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 ?
Thank you so much!
Thanks a lot for this video👍🏻👍🏻👍🏻
My pleasure 😊
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
Can I replace the arrow (swiper-navBtn) with an image?
How can I make it look like this as when someone add a new name, description and pic using javascript and inputs?
Can you make full crash video on properties to use,to initially make your website response with little work at media queries
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
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
Superb superb and superb!!!!!!!!!!!!!!!!!!
Thanks 🔥
How do you add many sliders. I want to make it 4 but one overwrites the others
if we use 2 sliders working together how to chnge it?
source code please?
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
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.
increíble tutorial, muy bueno
Glad you liked it.
hi bro can u make a video "showing selected menu and submenu dynamically after page reload"
really helpful
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
how do i make there be less slides? i cant tell what i have to delete
Hey @CodingLab can you make such tutorials on react? Please make of you can 🙂
Nice tutorial, i just cracked soft soft ;)
Good to hear!
Thank You
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
when i took the colours grey and red out at the end the arrows disappeared how come?
was struggling to keep this button outside thanks
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.
cool keep it up bro
sure I will
Thankyou very much your content help a lot😊.Can i use it in a website?they wil not claim copyright?please tell
What if we want multiple slider in one html file how to do that
Excellent video. Thank you so much. but when i host my website the picture don't show
Thanks alot bro....it helps alot ❤🤍🌹🌹🌹
Always welcome
i'm new in angular typescript can this work in angular
THANK YOU!!))
You're welcome!
amazing
Excellent
Thank you! Cheers!
i dont know somehow I cannot change the color of the next and prev arrows buttons, it just doesnt work anymore i guess
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{
how can i hange the arrow color ?
Nice
Hey I'm learning to create my first login page, i'm just confuse with the JS folder, what is inside of JS folder, is there a link you can provide so I can follow your tutorial. That'll be great help for me. Thank you.
This is the starting file and it will help you to follow my video tutorial step by step - drive.google.com/file/d/1iK8Lwj_USu_jtK5TogZrzoIKVn3hEQ-g/view?usp=sharing
How too automatically fetch data from json file?? Please reply
Why on 4:20 - border: 4px solid #4070f4 do not work without !important; ?
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.
thanks you so much brother
Most welcome
thank you so much
You're welcome!
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
lo he logrado , gracias
Thank you so much
You're most welcome
swiperjs is still working? because I cannot make it works :(
never guys never trie to learn such a big code
try always small and ese wayy
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.
I'm blocked with the js script, it doesn't work for me ...
From where to get images ?
Stick with it it gets easy over ti
i cant find the buttom of slider ! next and previous !
Thanks for the tutorial
Any time
I really like the extension to these icons in explorer, what's it called?
swiper.js
Complete js in one vid from beginning plz and sorry for not commenting bcoz my phone drowned in water but now 😎😎
The swiper won't work
with dropdown
How can I download code for card slider
i wanted reply but in react it's possible?