Create Responsive Card Slider in HTML CSS & JavaScript | Step-by-Step Tutorial

Published: 30 June 2024
on channel: CodingNepal
93,207
1.6k

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
➤ https://drive.google.com/file/d/1_0Od...

🗂️ Get Source Code of this Card Slider
➤ https://buymeacoffee.com/codingnepal/...

🌐 Visit CodingNepal for free coding projects
➤ https://www.codingnepalweb.com

⭐ Hire me on Fiverr
➤ https://www.fiverr.com/prakashahi

☕ Support me with a coffee
➤ https://buymeacoffee.com/codingnepal

📷 Follow me on Instagram
➤   / coding.np  

📲 Follow me on X (Twitter)
➤ https://www.x.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 (Official)  

#html #css #javascript #slider


Watch video Create Responsive Card Slider in HTML CSS & JavaScript | Step-by-Step Tutorial online without registration, duration hours minute second in high quality. This video was added by user CodingNepal 30 June 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 93,207 once and liked it 1.6 thousand people.