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

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

Пікірлер: 27

  • @Prerna-qc9qg
    @Prerna-qc9qg2 күн бұрын

    It just help me a lot!!

  • @CodingNepal
    @CodingNepal17 күн бұрын

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

  • @DEVO69

    @DEVO69

    17 күн бұрын

    Audio is good

  • @yubiroaster6285

    @yubiroaster6285

    17 күн бұрын

    Sound quality and video quality both are good

  • @yubiroaster6285
    @yubiroaster628527 күн бұрын

    Such a useful project 👏

  • @CodingNepal

    @CodingNepal

    24 күн бұрын

    Glad you like this project.

  • @tamizhseetha5290
    @tamizhseetha52903 күн бұрын

    thanks it helps me a lot

  • @muhammad_zohaib936
    @muhammad_zohaib93623 күн бұрын

    That is amazing sir ❤🙌

  • @CodingNepal

    @CodingNepal

    23 күн бұрын

    Thanks a lot.. keep watching!

  • @marpusik1277
    @marpusik127712 күн бұрын

    thanks 🙏

  • @sylvesterkuimba6543
    @sylvesterkuimba654325 күн бұрын

    you are the best

  • @CodingNepal

    @CodingNepal

    24 күн бұрын

    Thank you

  • @siddgupta222
    @siddgupta22222 күн бұрын

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

  • @rmusic6080
    @rmusic608012 күн бұрын

    it is good

  • @afzalmia428
    @afzalmia4287 күн бұрын

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

  • @abubakarkhawaja1653

    @abubakarkhawaja1653

    2 күн бұрын

    tu chai ke paise hi dede

  • @marvel4834
    @marvel483422 күн бұрын

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

  • @Fnydo
    @Fnydo27 күн бұрын

    Plz in vanilla js with plugin

  • @CodingNepal

    @CodingNepal

    24 күн бұрын

    If you're talking about slider without external library. Here are the videos: kzread.info/dash/bejne/gqeCw9F9mN23nZM.html kzread.info/dash/bejne/aIV5msaRoZy5f6g.html

  • @ClubMedia
    @ClubMedia27 күн бұрын

    :))

  • @Shivam99832
    @Shivam9983224 күн бұрын

    Make Earning Website please🙏🙏🙏

  • @CodingNepal

    @CodingNepal

    24 күн бұрын

    What type of earning website do you want?

  • @Shivam99832

    @Shivam99832

    24 күн бұрын

    @CodingNepal A Earning website that can be registered and sing in in with daily login rewards, watch and earn, scratch card, and complete tasks

  • @Village_Vilogging

    @Village_Vilogging

    22 күн бұрын

    ​@@CodingNepal e-commerce

  • @albelafirst1663
    @albelafirst166314 сағат бұрын

    am i the only one who sliding is not working

  • @田守翔-t2u
    @田守翔-t2u12 күн бұрын

    you are the best