Create Responsive Card Slider in HTML CSS & JavaScript | Card Slider in HTML CSS & JavaScript

No video

Create Responsive Card Slider in HTML CSS & JavaScript | Card Slider in HTML CSS & JavaScript

Рет қаралды 37,959

Күн бұрын

In the video, I showed how to create a responsive card slider using HTML, CSS, and JavaScript. This slider allows users to navigate through the cards using slider buttons or pagination. To make it a modern, touch-friendly, and responsive slider, I used SwiperJS, the leading slider library.
🖼️ Get Images of this Card Slider
➤ www.codingnepalweb.com/custom...
🗂️ Get Source Code of this Card Slider
➤ buymeacoffee.com/codingnepal/...
🌐 Visit CodingNepal for helpful coding projects
➤ www.codingnepalweb.com
⭐ Hire me on Fiverr
➤ www.fiverr.com/prakashahi
📷 Follow me on Instagram
➤ / coding.np
🤝 Support my work with a coffee
➤ buymeacoffee.com/codingnepal
🕔 Timestamps
0:00 Card Slider Demo
1:06 Starting with HTML & CSS
9:18 Getting started with Swiper
9:59 Adding Swiper Layout in HTML
10:41 Initializing Swiper in JavaScript
13:10 Applying Custom Styles
16:18 Card Slider Output
🎵 Music credit:
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...
#html #css #javascript #slider

Пікірлер: 40

@CodingNepal 29 күн бұрын

Please let me know if the audio is too loud, too soft, or just right.

@DEVO69 29 күн бұрын

Audio is good

@yubiroaster6285 29 күн бұрын

Sound quality and video quality both are good

@Prerna-qc9qg 11 күн бұрын

Everything is so smooth & perfect & my code actually works! It just helped me a lot!

@AdilAbuFatih 6 күн бұрын

Hi CodingNepal, how to make a slider in html from our image posts on Instagram?

@Prerna-qc9qg 14 күн бұрын

It just help me a lot!!

@yubiroaster6285 Ай бұрын

Such a useful project 👏

@CodingNepal Ай бұрын

Glad you like this project.

@tamizhseetha5290 15 күн бұрын

thanks it helps me a lot

@Gaurav_khadka 3 күн бұрын

Great ❤❤❤❤❤❤

@muhammad_zohaib936 Ай бұрын

That is amazing sir ❤🙌

@CodingNepal Ай бұрын

Thanks a lot.. keep watching!

@marpusik1277 24 күн бұрын

thanks 🙏

@sylvesterkuimba6543 Ай бұрын

you are the best

@CodingNepal Ай бұрын

Thank you

@MarkWilliamson-n4s 2 күн бұрын

Thanks

@bagusraziq9157 Күн бұрын

can i add some animation if the image slide?

@rmusic6080 25 күн бұрын

it is good

@siddgupta222 Ай бұрын

Bhai one video on Create Responsive School Website (HTML CSS & JavaScript)

@Kamlesh_k21 7 күн бұрын

vroo i wanna change image on hover in this slider.

@marvel4834 Ай бұрын

Bro I have a project which I tried a lot to make but I couldn't. I am new to learning web development. I didn't get any help to make the project. Can you please make a tutorial of my projector which you will upload on youtube. Please help build the project. How can I contact you to share my project? Please reply to me.❤❤❤

@afzalmia428 19 күн бұрын

I don't know why people ask money for coffee rather than Chai😊😊😅

@abubakarkhawaja1653 14 күн бұрын

tu chai ke paise hi dede

@Fnydo Ай бұрын

Plz in vanilla js with plugin

@CodingNepal Ай бұрын

If you're talking about slider without external library. Here are the videos: kzfaq.info/get/bejne/htl-lNJ1zeC1nWQ.html kzfaq.info/get/bejne/bLd1a8eJ1p-3f3k.html

@albelafirst1663 12 күн бұрын

am i the only one who sliding is not working

@CodingNepal 11 күн бұрын

Can you tell me where you got stuck so that I can help you?

@albelafirst1663 11 күн бұрын

@@CodingNepal The initializing swiper in java script is not working with me the slide doesn't move at all despite all the things seems to be perfctly done is there any or something or i am doing wrong

@francinedanielle 7 күн бұрын

Me too, in the console it says that the swiper was not defined. When I put "slider-wrapper" in js, it doesn't work

@CodingNepal 7 күн бұрын

If you're encountering a "Swiper is not defined" error, it's likely due to not properly including the Swiper script before the closing as shown at 9:53 on line 76. Double-check the script to ensure it's correctly added. Other things to consider to ensure the slider works properly: 1. Make sure you've included the Swiper CSS link before the closing as shown at 9:40 on line 9. 2. Double-check that the Swiper classes in your HTML code (swiper, swiper-wrapper, swiper-slide) are added exactly as shown in the tutorial. 3. Make sure you linked your script.js file as shown at 10:58 on line 82, and it must be after Swiper script. 4. Ensure you've updated the Swiper selector class name from .swiper to .slider-wrapper as shown at 11:34 on line 1.

@francinedanielle 7 күн бұрын

@@albelafirst1663it worked here. my script was above the swiper script and this wrong order caused conflict, after putting the js script at the end, it worked