Create Responsive Card Slider in HTML CSS & JavaScript | Step-by-Step Tutorial
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 Source Code of this Card Slider
➤ https://buymeacoffee.com/codingnepal/e/278877
🖼️ Get Images of this Card Slider
➤ https://drive.google.com/file/d/1_0OdxkhZXtX2TFsutfT8VlJGtBmoRdjL/view
🌐 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
➤ https://www.instagram.com/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]
https://youtu.be/DnPUq5qBZxk
#html #css #javascript #slider
Видео Create Responsive Card Slider in HTML CSS & JavaScript | Step-by-Step Tutorial канала CodingNepal
🗂️ Get Source Code of this Card Slider
➤ https://buymeacoffee.com/codingnepal/e/278877
🖼️ Get Images of this Card Slider
➤ https://drive.google.com/file/d/1_0OdxkhZXtX2TFsutfT8VlJGtBmoRdjL/view
🌐 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
➤ https://www.instagram.com/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]
https://youtu.be/DnPUq5qBZxk
#html #css #javascript #slider
Видео Create Responsive Card Slider in HTML CSS & JavaScript | Step-by-Step Tutorial канала CodingNepal
card slider html css card slider html css javascript card slider html css js responsive card slider html css card slider how to make card slider in html css & javascript how to make owl carousel how to make card slider in html and css product slider javascript how to make sliding card using html css javascript how to make card how to make card with sliding feature product card slider html css responsive card slider html image slider css image slider css tutorial
Комментарии отсутствуют
Информация о видео
30 июня 2024 г. 19:22:25
00:16:32
Другие видео канала
CSS Buttons with Cool Hover Effects | CodingNepal
Animated Dark Mode Button using HTML CSS | CodingNepal
Animated Buttons on Hover using HTML & CSS
AI Image Generator in HTML CSS & JavaScript
How to Make Chrome Extension in HTML CSS & JavaScript | Color Picker Extension in JavaScript
Quick CSS Trick
Build A Gradient Color Generator in HTML CSS & JavaScript | Gradient Generator in JavaScript
Image Gallery with 3D Flip Animation | HTML & CSS
Animated Glowing Inputs Login Form UI | HTML & CSS | CodingNepal
10 Best Beginners to Intermediate JavaScript Projects | Best JavaScript Projects for Beginners
10 Best JavaScript Projects with Free Source Code | JavaScript Projects for Beginners
QR Code Scanner or Reader in HTML CSS & JavaScript | QR Code Reader in JavaScript
Check Internet Connection in HTML CSS & JavaScript | Check Offline or Online Status in JavaScript
Popup Share Modal UI Design using HTML CSS & JavaScript
Create Text Typing Effect in HTML CSS & Vanilla JavaScript | Multiple Text Typing Animation in CSS
Sliding Subscription Box using HTML CSS & Javascript | Coding Nepal
Twitter Tweet Box with Character Limit Highlighting using HTML CSS & JavaScript
Create A Draggable Bottom Sheet Modal in HTML CSS & JavaScript | Bottom Sheet Modal in JavaScript
Top 10 CSS-3 Neumorphism UI Designs | CodingNepal
Create A Sidebar with Glassmorphism Effect in HTML and CSS | Sidebar in HTML and CSS
Create A Random Color Palette Generator in HTML CSS & JavaScript
