Fully Responsive Animated Image Slider Carousel using HTML CSS and JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ธ.ค. 2024

ความคิดเห็น • 47

  • @robertodepasamonte3434
    @robertodepasamonte3434 9 หลายเดือนก่อน +3

    Very engaging slider with image animation. Thank you for sharing. One suggestion -- the slider would be even better if you could add (via javascript) the functionality for one to advance the slides by clicking on the image thumbnails (as an alternative to clicking on the arrows). And thank you for providing the source code.

    • @creativejscoder
      @creativejscoder  9 หลายเดือนก่อน +1

      Ok, I will do it in another tutorial.

    • @fionabruce2009
      @fionabruce2009 7 หลายเดือนก่อน

      @@creativejscoder did you manage to do another video yet

    • @creativejscoder
      @creativejscoder  6 หลายเดือนก่อน

      @@fionabruce2009 you can see this tutorial: th-cam.com/video/gLK3Svsxx-Q/w-d-xo.html

  • @edsHTML
    @edsHTML 9 หลายเดือนก่อน

    this is a cool project 😏😏animations look smooth

  • @hayot1262
    @hayot1262 9 หลายเดือนก่อน +1

    Nice 👍

  • @davidd.larred7238
    @davidd.larred7238 7 หลายเดือนก่อน

    Just awesome, really great work.

  • @hugocangi6214
    @hugocangi6214 4 หลายเดือนก่อน +1

    BUENISIMO DURANTE EL DIA LO HAGO,MUCHAS GRACIAS

  • @MafazKhan1
    @MafazKhan1 6 หลายเดือนก่อน

    Great work bro😊😊😊😊😊😊😊😊

  • @joel9909
    @joel9909 5 หลายเดือนก่อน

    tHIS IS BEAUTIFUL

  • @hamrozjumaev
    @hamrozjumaev หลายเดือนก่อน

    Wonderful creation! Could you demonstrate this with bootsrap5 ?

  • @ebilipeter2132
    @ebilipeter2132 4 หลายเดือนก่อน

    Great work bro

  • @thomasnilsson8283
    @thomasnilsson8283 9 หลายเดือนก่อน

    Hello. Thanks for a great image slider. This is the slider I have been looking for. But I have one small problem. If I want the code to be a component on one of the pages and not on all. Is it possible to change the html code to React js code? Or Im doing anything wrong? (I´m new to React js but have done a navbar and some small pages)

  • @sedatiritas2112
    @sedatiritas2112 5 หลายเดือนก่อน

    That's incredible

  • @G_SAINI__8879
    @G_SAINI__8879 7 หลายเดือนก่อน

    great work 🥰.......But if u have added ur voice, it would've been easier to understand.

    • @creativejscoder
      @creativejscoder  7 หลายเดือนก่อน +1

      In future Insha Allah. But, I tried to code step by step. If you don't understand any part of this project, just feel free to ask me in the comment.

  • @User2.o
    @User2.o หลายเดือนก่อน

    hey thanks!
    do you know how can we make one in which there are prev next arrows but we can ALSO click on the images and it will become the background.
    Edit:
    Also for anyone who is coding this nd wondering why the "see more" button do not have the fading effect..
    in style sheet,
    /* animation text in first item */
    .slider .list .item:nth-child(1) .content .buttons
    has button"s" but in html button class there is no s , so the fading effect is not visible for the button, i removed the s from buttons and it worked for me.(only ik how much time i ve wasted for such a trivial issue)

  • @rajeevthakur4916
    @rajeevthakur4916 4 หลายเดือนก่อน +1

    Great work with a minimum code and minimum complexity, Can you do it with react and gsap because I am unable to replicate your work in react.
    👍

    • @creativejscoder
      @creativejscoder  4 หลายเดือนก่อน

      Coming soon...

    • @CharlieCocalon
      @CharlieCocalon หลายเดือนก่อน +1

      I'm doing it right now in react and with gsap. But not yet finish.

  • @fionabruce2009
    @fionabruce2009 9 วันที่ผ่านมา

    @Creativejscoder pls is there a way of using this on the top of the page instead of the whole page

    • @creativejscoder
      @creativejscoder  8 วันที่ผ่านมา +1

      Yes, you have to change, height weight and position of the slider.

    • @fionabruce2009
      @fionabruce2009 7 วันที่ผ่านมา

      @@creativejscoder which of the css do i need to change and also I tried the animation for next and previous button does not work at all i tried with the script in github didn't work and also followed what you did none of them worked for me at all. Please can you help me out. Can I email you my scripts if you don't mind

    • @creativejscoder
      @creativejscoder  6 วันที่ผ่านมา

      @@fionabruce2009 is there showing any error in the console?? just let me know.

  • @Ankit.Jaiswal7
    @Ankit.Jaiswal7 4 หลายเดือนก่อน +1

    Any idea mobile ke liye isko kaise design kare

    • @creativejscoder
      @creativejscoder  4 หลายเดือนก่อน

      You can make it responsive for all devices. Then easily you can use this for mobile.

    • @creativejscoder
      @creativejscoder  4 หลายเดือนก่อน

      And this is a fully responsive design. You can use it for mobile.

  • @mahmouedfarg6332
    @mahmouedfarg6332 5 หลายเดือนก่อน

    thank you bro ❤

  • @sumangupta854
    @sumangupta854 6 หลายเดือนก่อน

    Amazing

  • @len.al.2777
    @len.al.2777 6 หลายเดือนก่อน

    awesome

  • @bazichill
    @bazichill 2 หลายเดือนก่อน

    ❤❤❤❤

  • @neurovers1ty
    @neurovers1ty 9 หลายเดือนก่อน +1

    Can i get the sourcecode?

    • @joel9909
      @joel9909 5 หลายเดือนก่อน +1

      Code along and get your own source code buddy, cmon don't be lazy

  • @ernestomelendez5577
    @ernestomelendez5577 4 หลายเดือนก่อน

    me encanta y se ve bien

  • @fionabruce2009
    @fionabruce2009 6 หลายเดือนก่อน

    @Creativejscoder am not sure why the next and previous button does not work, please can you review your code if you dont mind

    • @creativejscoder
      @creativejscoder  6 หลายเดือนก่อน

      Ok. Did you try with source code?

    • @fionabruce2009
      @fionabruce2009 6 หลายเดือนก่อน

      @@creativejscoder yes I did

    • @fionabruce2009
      @fionabruce2009 6 หลายเดือนก่อน

      @@creativejscoder Yes I did and its same issue

    • @creativejscoder
      @creativejscoder  6 หลายเดือนก่อน

      @@fionabruce2009 Okk let me see

    • @fionabruce2009
      @fionabruce2009 6 หลายเดือนก่อน

      @@creativejscoder any luck at all

  • @gudong1012
    @gudong1012 4 หลายเดือนก่อน

    真的很好看

  • @gamingwithfriends804
    @gamingwithfriends804 9 หลายเดือนก่อน

    Source Code Please

  • @marcosu5547
    @marcosu5547 4 หลายเดือนก่อน

    😘

  • @vindyadhariishadhara9952
    @vindyadhariishadhara9952 3 หลายเดือนก่อน

    ❤🧡💛💚💙💜🤎🤍