How to make Responsive Card Slider in HTML CSS & JavaScript | SwiperJs

Подписаться 155 тыс.

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

50% 1

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

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

25 май 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@lucamorropa Год назад

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!

@sasimo7019 Год назад

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

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

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

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

bro you are pro developer.....many student got benifits of it ...superb

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

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.

@arthurkhallifa Год назад

i was trying to find a way to make those slider's responsive, to my lucky i found ur video, ty so much!

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

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!

@davidruiz-bw5mx 2 месяца назад

TE PASASTE UN DIV DEBERIA ESTAR DENTRO DEL SLIDE-CONTENT

@buratrecords7777 Год назад

An excellent video turned out, everything is well thought out, a very clear instruction turned out)))

@CodingLabYT Год назад

Glad you liked it!

@ryujin2206 Год назад

When I put swiper-slide on the card div, its making the card take up the whole width of the container??

@indidwilestari853 Год назад

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.

@CodingLabYT Год назад

You are so welcome!

@cinna_talks 3 месяца назад

@@CodingLabYT can you provide the code

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

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!!

@ab_obada5012 Год назад

Man I love RU-vid a lot. It introduces a lot of creative people. you deserve my appreciation.

@CodingLabYT Год назад

Thankyou so much.

@codingkatta7721 Год назад

This is very helpful but Please try to add your own voice with explanation .

@CodingLabYT Год назад

Thank you for your kind suggestion. I will think about it.

@winter8136 Год назад

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

@mahatojigaming Год назад

@@CodingLabYT please think fast sirji

@prathamnemade2293 Год назад

@@winter8136 😊

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

@@CodingLabYT yes sir it will helpful we can't follow with your flow

@JJ-ot3ps Год назад

love to see this in tailwind too!

@kabic18 2 года назад

Excellent video. Thank you so much.

@CodingLabYT 2 года назад

You are welcome!

@jujuba_radioativa 3 месяца назад

Thank you very much! This help me a lot!!

@CreativeTutorialsWeb 2 года назад

What an amazing project great video Sir 👏👏

@CodingLabYT 2 года назад

Glad to hear that.

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

Thank You Broooo.... For Teaching Slider In html Css ❤❤❤❤❤

@SquaredbyX 2 года назад

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.

@alexalejos1049 2 года назад

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

@TeachAshutosh 2 года назад

Thank sir , you are my life on RU-vid platforms Because I have learn many code see your video. Big fan sir

@CodingLabYT 2 года назад

It's my pleasure

@saidanadam5373 Год назад

The Best Content , i love You Bro

@martinezsalinasemiliano6543 Год назад

the best video I’ve ever seen, thankssss!

@CodingLabYT Год назад

Glad you liked it!

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

Thanks this is very helpful 😊

@t.i.i8608 Год назад

thank you for the video, it's helpful!

@CodingLabYT Год назад

Glad it was helpful!

@emadbr2048 Год назад

It was useful. Thank you ❤️

@CodingLabYT Год назад

Glad it was helpful!

@barankurt4316 Год назад

hello, how can we filter these profile cards by city and district location with select options?

@marcos2380 Год назад

Maravilha aprendi muito

@puloksoren1033 Год назад

@kevinsamir4655 Год назад

You have no idea how grateful I am for tNice tutorials series

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

kudos to you bro!!!!

@licioussamuels Год назад

Can you use two different swiper slides without CSS and js conflicting

@palapa804 Год назад

I'm wondering, what if it's made automatically?,does it need to be reset all?

@jimenaulloa9720 Год назад

really great work, thank you

@CodingLabYT Год назад

Glad you liked it!

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

in swiper js website the option the infinite loops one is not coming

@slimfit9605 Год назад

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?

@colinritchie5204 Год назад

If i want to copy and past multiple rows of these how could i stop the button from making all of them scroll

@Henry_Nunez 2 года назад

👏 EXCELENTE

@ahmetdogukankonuk Год назад

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, }, },

@enezinho2222 Год назад

Adamsın dogukan

@ahmetdogukankonuk Год назад

@@enezinho2222 teşekkürler dostum

@vijendrapandey1830 Год назад

can you please tell how can i display 4 cards instead of 3

@ahmetdogukankonuk Год назад

@@vijendrapandey1830 all you need to do set slidesPerView to 3 in which screen size you want

@vijendrapandey1830 Год назад

@@ahmetdogukankonuk not working

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

thank you very much !

@davidruiz-bw5mx 2 месяца назад

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 ?

@BrianMaia Год назад

Thank you so much!

@uniquegamer682 Год назад

Thanks a lot for this video👍🏻👍🏻👍🏻

@CodingLabYT Год назад

My pleasure 😊

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

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

@SagalMuhammad-hz6bz 5 месяцев назад

i have the same problem please how did you fix it

@TeddyWrestling Год назад

Can I replace the arrow (swiper-navBtn) with an image?

@waleefalrooh8 Год назад

How can I make it look like this as when someone add a new name, description and pic using javascript and inputs?

@godfirstjohnson1916 Год назад

Can you make full crash video on properties to use,to initially make your website response with little work at media queries

@MohamedIslamDJOUABLIA Год назад

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

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

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

@pratyadutimishra3332 Год назад

Superb superb and superb!!!!!!!!!!!!!!!!!!

@CodingLabYT Год назад

Thanks 🔥

@proexpert6325 Год назад

How do you add many sliders. I want to make it 4 but one overwrites the others

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

if we use 2 sliders working together how to chnge it?

@nikakuprashvili8235 3 месяца назад

source code please?

@sumitrawat6621 2 года назад

Great sir you are awsome 💕❤️😊

@CodingLabYT 2 года назад

Thank you so much 😀

@sumitrawat6621 2 года назад

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

@Muhammad-Saim-Rajpoot Год назад

Thanks ! Really helpful.❤

@CodingLabYT Год назад

Glad it was helpful!

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

Hi do you have the swiperjs code?

@Muhammad-Saim-Rajpoot 9 месяцев назад

@@divyaangane5304 yup . I have it . I integrated it in my website. Works perfectly.

@christCE Год назад

increíble tutorial, muy bueno

@CodingLabYT Год назад

Glad you liked it.

@saiteja6225 2 года назад

hi bro can u make a video "showing selected menu and submenu dynamically after page reload"

@Alex-xe6bl Год назад

when I set the slidesPerView to auto or whatever value. it puts the 1st item as last. the second item is displayed first

@CodingLabYT Год назад

You can take source code from my website link is in description

@user-tl9my1ld7o Год назад

really helpful

@Vert1go_ Год назад

how do i make there be less slides? i cant tell what i have to delete

@technosujeet 2 года назад

Hey @CodingLab can you make such tutorials on react? Please make of you can 🙂

@watashiuruhaku9901 Год назад

Nice tutorial, i just cracked soft soft ;)

@CodingLabYT Год назад

Good to hear!

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

when i took the colours grey and red out at the end the arrows disappeared how come?

@bhavanishankar9974 3 месяца назад

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

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

Thank You

@shilpashekar1139 Год назад

was struggling to keep this button outside thanks

@nanaagyemang230 3 месяца назад

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.

@abcfuture5779 Год назад

cool keep it up bro

@CodingLabYT Год назад

sure I will

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

What if we want multiple slider in one html file how to do that

@user-rz7mi8pi3h 11 месяцев назад

Thankyou very much your content help a lot😊.Can i use it in a website?they wil not claim copyright?please tell

@maro__uane Год назад

Excellent video. Thank you so much. but when i host my website the picture don't show

@zuhairn Год назад

Thanks alot bro....it helps alot ❤🤍🌹🌹🌹

@CodingLabYT Год назад

Always welcome

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

i'm new in angular typescript can this work in angular

@vitaliykolesnik3449 Год назад

THANK YOU!!))

@CodingLabYT Год назад

You're welcome!

@Deus-lo-Vuilt Год назад

amazing

@UdomTanong 2 года назад

Excellent

@CodingLabYT 2 года назад

Thank you! Cheers!

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

i dont know somehow I cannot change the color of the next and prev arrows buttons, it just doesnt work anymore i guess

@robertcristian906 Год назад

I cannot color the bullets from pagination.The selector .swiper-pagination-bullet doesn't work. Any ideas ?

@Madson123100 Год назад

Had the same problem, solved by switchin the "." for "-" before "bullet" in the css: .swiper-pagination-bullet{

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

how can i hange the arrow color ?

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

Nice

@joyo.5804 Год назад

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.

@CodingLabYT Год назад

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