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

Поділитися
Вставка
  • Опубліковано 11 січ 2025

КОМЕНТАРІ • 71

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

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

  • @CodingNepal
    @CodingNepal  6 місяців тому +12

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

    • @DEVO69
      @DEVO69 6 місяців тому

      Audio is good

    • @yubiroaster6285
      @yubiroaster6285 6 місяців тому

      Sound quality and video quality both are good

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

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

    • @AdilFakhruRoza
      @AdilFakhruRoza 5 місяців тому

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

    • @BliitzPint
      @BliitzPint 5 місяців тому

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

  • @vindhyaplaysgamingchannel6001
    @vindhyaplaysgamingchannel6001 4 місяці тому

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

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

    Such a useful project 👏

    • @CodingNepal
      @CodingNepal  6 місяців тому

      Glad you like this project.

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

    Hi, i have a problem, when i tried to change the color of the pagination or the button next/prev, it didn't change. And i have tried other ways, it didn't work as well, what's the problem?

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

    You're the greatest!! Thanks for the help.

  • @TEEJAY-d3i
    @TEEJAY-d3i Місяць тому

    This is wonderful!! ❤️❤️❤️

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

    can i add some animation if the image slide?

  • @faruqmuhammad3374
    @faruqmuhammad3374 4 місяці тому +1

    it just help meee, thank youuu!!!!

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

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

      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?

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

      Hi , I had same problem it seems that we need to add .swiper class in the main div class container in order to get the correct slides.

    • @sharathpillai5394
      @sharathpillai5394 24 дні тому

      I got the same issue because i put "slidesPreView" instead of "slidesPerView" now it's solved

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

    It just help me a lot!!

  • @windylestari8389
    @windylestari8389 23 дні тому

    hi, could anyone help why the result of my slide fits the window? like the size is not the same before adding the swiper js :)

  • @muhammad_zohaib936
    @muhammad_zohaib936 6 місяців тому

    That is amazing sir ❤🙌

    • @CodingNepal
      @CodingNepal  6 місяців тому

      Thanks a lot.. keep watching!

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

    Hi mister, why after you install the CSS style and script from swiper.js, the card list immediately moves horizontally to the side? Wasn't it previously moved downwards?

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

      The Swiper CSS adds custom styles that change the card layout to horizontal. You can inspect the cards by pressing the F12 key to see these styles.

  • @YaroMalik
    @YaroMalik 4 місяці тому

    great work how did you become so good

  • @tamizhseetha5290
    @tamizhseetha5290 5 місяців тому

    thanks it helps me a lot

  • @Gaurav_khadka
    @Gaurav_khadka 5 місяців тому

    Great ❤❤❤❤❤❤

  • @slow_and_reverb_songs_9
    @slow_and_reverb_songs_9 5 місяців тому

    vroo i wanna change image on hover in this slider.

  • @CloudledgerZimbabwe
    @CloudledgerZimbabwe 6 місяців тому

    you are the best

  • @f3rnaandez
    @f3rnaandez 4 місяці тому

    Obrigado amigo , você é um amigo amigo.

  • @aliadrian2772
    @aliadrian2772 4 місяці тому

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

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

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

    • @aliadrian2772
      @aliadrian2772 4 місяці тому

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

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

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

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

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

  • @afnandawoad5646
    @afnandawoad5646 4 місяці тому

    thanks for the video

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

    my slider doesn't change from vertical to horizontal. I have checked 100 times. cant find the mistake. what a pitty. great tutorial though

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

      Can you share your html and js code here so I can look into it.?

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

    Plz in vanilla js with plugin

    • @CodingNepal
      @CodingNepal  6 місяців тому +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

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

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

  • @siddgupta222
    @siddgupta222 6 місяців тому

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

  • @marpusik1277
    @marpusik1277 6 місяців тому

    thanks 🙏

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

    am i the only one who sliding is not working

    • @CodingNepal
      @CodingNepal  5 місяців тому

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

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

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

      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  5 місяців тому +4

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

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

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

    Thanks

  • @rmusic6080
    @rmusic6080 6 місяців тому

    it is good

  • @İlovetece
    @İlovetece 5 місяців тому

    Очень круто

  • @Shivamkumarverma76
    @Shivamkumarverma76 6 місяців тому

    Make Earning Website please🙏🙏🙏

    • @CodingNepal
      @CodingNepal  6 місяців тому

      What type of earning website do you want?

    • @Shivamkumarverma76
      @Shivamkumarverma76 6 місяців тому

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

      ​@@CodingNepal e-commerce

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

    dislike por no poner codigo

  • @ClubMedia
    @ClubMedia 6 місяців тому

    :))