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

Поділитися
Вставка
  • Опубліковано 19 жов 2024

КОМЕНТАРІ • 60

  • @CodingNepal
    @CodingNepal  2 місяці тому +2

    Get Source Code of this Card Slider: buymeacoffee.com/codingnepal/e/278877

  • @vindhyaplaysgamingchannel6001
    @vindhyaplaysgamingchannel6001 Місяць тому

    excellent video with clear understanding. Even though i don't know java script much, i understood .Thank you so much.

  • @CodingNepal
    @CodingNepal  3 місяці тому +10

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

    • @DEVO69
      @DEVO69 3 місяці тому

      Audio is good

    • @yubiroaster6285
      @yubiroaster6285 3 місяці тому

      Sound quality and video quality both are good

    • @Prerna-qc9qg
      @Prerna-qc9qg 2 місяці тому

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

    • @AdilFakhruRoza
      @AdilFakhruRoza 2 місяці тому

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

    • @BliitzPint
      @BliitzPint 2 місяці тому

      I would prefer live commenting instead of nasty keyboard sounds and music.

  • @yubiroaster6285
    @yubiroaster6285 3 місяці тому +5

    Such a useful project 👏

    • @CodingNepal
      @CodingNepal  3 місяці тому

      Glad you like this project.

  • @Prerna-qc9qg
    @Prerna-qc9qg 2 місяці тому +1

    It just help me a lot!!

  • @bagusraziq9157
    @bagusraziq9157 2 місяці тому +2

    can i add some animation if the image slide?

  • @faruqmuhammad3374
    @faruqmuhammad3374 2 місяці тому

    it just help meee, thank youuu!!!!

  • @muhammad_zohaib936
    @muhammad_zohaib936 3 місяці тому

    That is amazing sir ❤🙌

    • @CodingNepal
      @CodingNepal  3 місяці тому

      Thanks a lot.. keep watching!

  • @tamizhseetha5290
    @tamizhseetha5290 2 місяці тому

    thanks it helps me a lot

  • @f3rnaandez
    @f3rnaandez Місяць тому

    Obrigado amigo , você é um amigo amigo.

  • @YaroMalik
    @YaroMalik Місяць тому

    great work how did you become so good

  • @SAL73VFX
    @SAL73VFX Місяць тому

    Hi, I have a problem. My Slider works, but no matter what resolution I have on my monitor, it just show one card, and it extends this card-item almost all over the screen. If I click on the sides arrows, it shows the next or the before card, but one at a time. In essence, if I have my browser deployed about 1200 px width, instead of showing 3 cards or more, it just show one, what could be wrong? Thanks for this awesome tutorial!

    • @CodingNepal
      @CodingNepal  Місяць тому

      It sounds like there might be a typo or a missing breakpoint in your script.js. Could you double-check the code starting from 11:41 in the video to ensure it matches mine?

  • @sylvesterkuimba6543
    @sylvesterkuimba6543 3 місяці тому

    you are the best

  • @Gaurav_khadka
    @Gaurav_khadka 2 місяці тому

    Great ❤❤❤❤❤❤

  • @afnandawoad5646
    @afnandawoad5646 Місяць тому

    thanks for the video

  • @siddgupta222
    @siddgupta222 3 місяці тому

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

  • @marpusik1277
    @marpusik1277 3 місяці тому

    thanks 🙏

  • @MarkWilliamson-n4s
    @MarkWilliamson-n4s 2 місяці тому

    Thanks

  • @Kamlesh_k21
    @Kamlesh_k21 2 місяці тому

    vroo i wanna change image on hover in this slider.

  • @afzalmia428
    @afzalmia428 3 місяці тому +1

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

  • @aliadrian2772
    @aliadrian2772 Місяць тому

    is there is a way to make this with out using swiper ?

    • @CodingNepal
      @CodingNepal  Місяць тому +1

      Here are the some slider videos that don't use external library:
      ua-cam.com/video/PsNaoDhzQm0/v-deo.html
      ua-cam.com/video/6QE8dXq9SOE/v-deo.html

    • @aliadrian2772
      @aliadrian2772 Місяць тому

      @@CodingNepal just wanted to drop a note to say thank you for your kindness, I truly appreciate it .

    • @aliadrian2772
      @aliadrian2772 Місяць тому

      @@CodingNepal and you are amazing bay the way , and I learned a lot from your video

    • @CodingNepal
      @CodingNepal  Місяць тому +1

      @@aliadrian2772 It's my pleasure. Happy coding!

  • @Ashur-lab
    @Ashur-lab Місяць тому

    if only I knew you were bout to use an external library I wouldn't watch

  • @Fnydo
    @Fnydo 3 місяці тому +1

    Plz in vanilla js with plugin

    • @CodingNepal
      @CodingNepal  3 місяці тому +1

      If you're talking about slider without external library. Here are the videos:
      ua-cam.com/video/PsNaoDhzQm0/v-deo.html
      ua-cam.com/video/6QE8dXq9SOE/v-deo.html

  • @rmusic6080
    @rmusic6080 3 місяці тому

    it is good

  • @МихаилЧерников-ф2т
    @МихаилЧерников-ф2т 2 місяці тому

    Очень круто

  • @albelafirst1663
    @albelafirst1663 2 місяці тому +5

    am i the only one who sliding is not working

    • @CodingNepal
      @CodingNepal  2 місяці тому

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

    • @albelafirst1663
      @albelafirst1663 2 місяці тому +2

      @@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
      @francinedanielle 2 місяці тому

      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
      @CodingNepal  2 місяці тому +3

      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
      @francinedanielle 2 місяці тому

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

  • @Shivam99832
    @Shivam99832 3 місяці тому

    Make Earning Website please🙏🙏🙏

    • @CodingNepal
      @CodingNepal  3 місяці тому

      What type of earning website do you want?

    • @Shivam99832
      @Shivam99832 3 місяці тому

      @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 3 місяці тому

      ​@@CodingNepal e-commerce

  • @ClubMedia
    @ClubMedia 3 місяці тому

    :))