Responsive Image Slider | With Manual Button & Auto-play Navigation Visibility - HTML CSS Javascript

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

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

  • @benuliniboy1
    @benuliniboy1 4 ปีที่แล้ว +18

    Thank you man, you saved my life! This is exactly what I was looking for, and it looks awesome as well! You've just earned a new subscriber. Keep up the great work!

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      You're most welcome! ❤

    • @LetsBland9411
      @LetsBland9411 2 ปีที่แล้ว

      Sir if it's working for you please what did you do. Because I just did copy and paste the code into my html but nothing is working for me please help

  • @osifesoayodeji4503
    @osifesoayodeji4503 3 ปีที่แล้ว

    Apart from getting what I exactly needed, I still learnt another vital thing, clip path.
    Thanks bro

    • @yuktagajeshwar2536
      @yuktagajeshwar2536 2 ปีที่แล้ว

      th-cam.com/video/YCD617NrtEw/w-d-xo.html
      th-cam.com/video/TBdroZTX1kY/w-d-xo.html
      Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...

  • @vanessacarey6265
    @vanessacarey6265 3 ปีที่แล้ว

    I ditto the comment below, thanks so much for this, I needed this. I really liked how your proved the code and javascript with F12. Awesome Job! Added to my favs!

    • @yuktagajeshwar2536
      @yuktagajeshwar2536 2 ปีที่แล้ว

      th-cam.com/video/YCD617NrtEw/w-d-xo.html
      th-cam.com/video/TBdroZTX1kY/w-d-xo.html
      Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...

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

    Thank you so much for making this video, it was a great help

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

    Thank you so much for sharing this interactive image slider

  • @Mehedihasan-nt5zk
    @Mehedihasan-nt5zk 4 ปีที่แล้ว +2

    Thanks brothers love for Bangladesh!

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      You're most welcome! ❤

  • @josejohnhalindogo8336
    @josejohnhalindogo8336 4 ปีที่แล้ว +1

    The background music though! 😍❤

  • @sankardalui8374
    @sankardalui8374 2 ปีที่แล้ว

    I really enjoy your channel and you are a good teacher. I might have missed sotNice tutorialng and I don't get friends with the setuper. I worked

  • @rashidulislam1362
    @rashidulislam1362 2 ปีที่แล้ว

    Thank you brother. That was very very very helpful video. I searched this type of video many times but I can't find. And this video also help me to figure out more topic. Thanks again.

    • @CodingSnow
      @CodingSnow  2 ปีที่แล้ว +1

      You're most welcome!

    • @rashidulislam1362
      @rashidulislam1362 2 ปีที่แล้ว

      Hope you will upload this type of unique video continuesly.

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

    Nice work brother ❤❤

  • @ricardoraulsevillalazaro1833
    @ricardoraulsevillalazaro1833 3 ปีที่แล้ว

    Thanks you very much man. That was what i searched for a long time.

    • @yuktagajeshwar2536
      @yuktagajeshwar2536 2 ปีที่แล้ว

      th-cam.com/video/YCD617NrtEw/w-d-xo.html
      th-cam.com/video/TBdroZTX1kY/w-d-xo.html
      Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...

  • @SeamusFitzpatrick
    @SeamusFitzpatrick 3 ปีที่แล้ว +2

    Very good and easy to follow tutorial, really THANK YOU!!! and love the tracks playing on in the background, nice selection!!!

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

    thank you you have solved a problem for me i pray to God to help you and bless you🥰

  • @samuelk1623
    @samuelk1623 4 ปีที่แล้ว +1

    Great Design. Your designs are very attractive. Nice work!

  • @vedantkadam2147
    @vedantkadam2147 2 ปีที่แล้ว

    man you are awesome
    I reall got to learn alot of things

  • @fr1endsies
    @fr1endsies ปีที่แล้ว +1

    Great video! I had to put a z-index on .manual-btn. the .navigation-auto was obscuring the buttons.

  • @GoodBoy-xb8kd
    @GoodBoy-xb8kd ปีที่แล้ว +3

    This image resolution??

  • @vinnypassmore5657
    @vinnypassmore5657 ปีที่แล้ว

    Fantastic Tutorial, with a excellent finish, thanks for sharing.👌

  • @ЕвгенияОдесса-у8и
    @ЕвгенияОдесса-у8и ปีที่แล้ว

    Just great! Thanks a lot!

  • @pranavbakare8922
    @pranavbakare8922 2 ปีที่แล้ว

    Absolutely amazing man keep sharing and growing

  • @giftmanyo7919
    @giftmanyo7919 3 ปีที่แล้ว

    Thanks a million for this, God bless you bountifully

  • @pathmashanthasenanayaka3193
    @pathmashanthasenanayaka3193 4 ปีที่แล้ว +2

    Good job sir..❤❤

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว +1

      Thank you! ❤️

  • @haxMat
    @haxMat 4 ปีที่แล้ว +2

    Hello,
    I just wanted to say that its brilliant tutorial.
    Looking forward to see future videos about css tricks , like this transition :D

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      Hello, Thank you very much! ❤️
      Stay tuned for more..

    • @yuktagajeshwar2536
      @yuktagajeshwar2536 2 ปีที่แล้ว

      th-cam.com/video/YCD617NrtEw/w-d-xo.html
      th-cam.com/video/TBdroZTX1kY/w-d-xo.html
      Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...

  • @shahidafwan1102
    @shahidafwan1102 ปีที่แล้ว

    Brilliant friend

  • @layyly
    @layyly 3 ปีที่แล้ว

    the best tutor

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

    In a div content with display flex and width auto add the images with the size of the center frame, for example one image with the class "display", .display{width: 95vw; height: 95vh}, then the div_content{width: auto; height: 95vh; display:flex; flex-flow: row nowrap; justify-content:space-evenly; align.items: center }, the content div will grow depending on the number of images by their width of each one, then .center_frame{width: 95vw; height: 95vh; display:flex; flex-flow: row nowrap; justify-content:space-evenly; align.items: center; overflow:hidden}, this is how a manual slider looks:



    let btn_menu = document.querySelectorAll(".btn_menu");
    let displays = document.querySelectorAll(".display");
    let mode_active = function (index) {
    for (let i = 0; i < displays.length; i++) {
    displays[i].style.transform = `translateX(${index * -100}%)`;
    }
    }
    for (let i = 0; i < btn_menu.length; i++) {
    btn_menu[i].addEventListener("click", function () {
    mode_active(i);
    });
    }

  • @rubenreyes8220
    @rubenreyes8220 4 ปีที่แล้ว +1

    buen video, saludos desde Mexico.
    Good video, greetings from Mexico

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      Thank you very much! ❤️

  • @hassenhamrouni2147
    @hassenhamrouni2147 4 ปีที่แล้ว +5

    Brilliant work as always 🙌 . if you do a fully responsive pur css ecommerce product card with pop up quick view . Man. I'd be so grateful . KEEP UP THE GREAT FLOW ❤

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว +1

      Thank you! ❤️ Nice idea.

    • @yuktagajeshwar2536
      @yuktagajeshwar2536 2 ปีที่แล้ว

      th-cam.com/video/YCD617NrtEw/w-d-xo.html
      th-cam.com/video/TBdroZTX1kY/w-d-xo.html
      Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...

  • @kamdanibwp
    @kamdanibwp 2 ปีที่แล้ว

    peace be with you dear,
    Good work,
    my search ended for a slider without a heavy js library.
    Thanks a lot, so nice of you..
    A little more help is needed
    this is not working in underscore wordpress.
    Please consider to suggest the edits....
    Thanks again!

  • @hembromjohn
    @hembromjohn ปีที่แล้ว

    What should be the image dimensions for this kind of project?
    In order to make it responsive well in all devices.. kindly reply 🙏

  • @kringe3394
    @kringe3394 2 ปีที่แล้ว +1

    thanks man.
    but what are you using to code (app)

  • @josejohnhalindogo8336
    @josejohnhalindogo8336 4 ปีที่แล้ว +1

    This is great! Thanks a lot

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      You're welcome! ❤️

  • @Actor_mp
    @Actor_mp 2 ปีที่แล้ว

    thanks u, its works for me👌👌

  • @sanjayakumar8219
    @sanjayakumar8219 4 ปีที่แล้ว +1

    Thank you sir. It is very helpful 💛💛

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      You're welcome! ❤

  • @eduardohenriquedeassis9729
    @eduardohenriquedeassis9729 3 ปีที่แล้ว

    Hey Bro, that´s really amazing!!!
    Warm greetings from Brasil.

    • @CodingSnow
      @CodingSnow  3 ปีที่แล้ว

      Thank you! ❤️

  • @AhmedIbrahim-mm3hw
    @AhmedIbrahim-mm3hw 3 ปีที่แล้ว

    excellent tutorial Only small tip in last of your video you need to modify the conditions as once i clicked btn you need to set ( i ) to the new position. but great work.👏🏻👏🏻👏🏻👏🏻

    • @HelloWorld-vr5dw
      @HelloWorld-vr5dw 2 ปีที่แล้ว

      Dude
      just use a new variable j
      initialize j = 1 on top
      and assign j = i in btn.forEach function of Manual
      Later replace all i with j in function of Automatic
      Snippet:
      let j = 1
      var slides = document.querySelectorAll(".slide")
      var btns = document.querySelectorAll(".btn")
      let currentSlide = 1
      var manualNav = function(manual){
      slides.forEach((slide) => {
      slide.classList.remove('active');
      btns.forEach((btn) => {
      btn.classList.remove('active');
      })
      })
      slides[manual].classList.add('active');
      btns[manual].classList.add('active');
      }
      btns.forEach((btn , i) => {
      btn.addEventListener("click" , () =>{
      manualNav(i);
      currentSlide = i;
      j = i
      })
      });
      var repeat = function(activeClass){
      let active = document.getElementsByClassName('active');
      var repeater = () => {
      setTimeout(function(){
      [...active].forEach((activeSlide) => {
      activeSlide.classList.remove('active')
      })
      slides[j].classList.add('active');
      btns[j].classList.add('active');
      j++;
      if(slides.length == j){
      j = 0;
      }
      if(j>= slides.length){
      return;
      }
      repeater();
      } , 5000);
      }
      repeater();
      }
      repeat();

  • @sayalideep8688
    @sayalideep8688 3 ปีที่แล้ว +1

    Actually after click on clip path my half text is not looking.and also bottom pointer not looking.why???what can I do???

  • @MohammedAhmed-iz9cr
    @MohammedAhmed-iz9cr 2 ปีที่แล้ว

    bow beautiful

  • @empoweredman3371
    @empoweredman3371 3 ปีที่แล้ว +4

    Hello! Your sliders tutorial are great. I got one question though, is it possible to synchronize autoplay nav with manual nav? For exaple when i have 8 pictures I click manually on image 7th but autoplay is going back to second image because it only got that far. How to make autoplay go 8th instead of going back to were IT was? I know it is possible but do you know how? It would be a great addon because now this is a little annoying when you got more than 3-4 pictures. Looking forward to your reply, keep up the good work. Regards

    • @CodingSnow
      @CodingSnow  3 ปีที่แล้ว +2

      Hello! I designed a new image slider tutorial according to your suggestion. Here's the link - th-cam.com/video/tphDji-XZCE/w-d-xo.html

  • @SameerKumar-ee4qj
    @SameerKumar-ee4qj 4 ปีที่แล้ว +1

    Remember me I am you very old subscriber btw still love your video

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      Yes, I remember. I am so glad to hear from you! Thank you! thank you very much for your support! ❤

  • @youtubehelper227
    @youtubehelper227 4 ปีที่แล้ว +1

    Super broo :)

  • @marcioaugusto392
    @marcioaugusto392 3 ปีที่แล้ว

    Awesome tutorial! Thank you for this excelent video!

  • @Vincentvisuals
    @Vincentvisuals 2 ปีที่แล้ว

    Nice one!!

    • @CodingSnow
      @CodingSnow  2 ปีที่แล้ว

      Thank you ❤️

  • @chinnguyen8944
    @chinnguyen8944 ปีที่แล้ว +1

    Thank you very much for your tut. Anyway, what is the name of the code editor you are using? very interesting. Many thanks

  • @wolfenrico
    @wolfenrico ปีที่แล้ว

    I received the code for the slider. Thanks. Can you tell me what I need to do to adjust the slider for photos with a size of 1900 x 850 px fullscreen so that I can embed the slider in a webpage? Thanks in advance for your tip

  • @mohammedsufiyan5164
    @mohammedsufiyan5164 2 ปีที่แล้ว

    Thanks man 👍

  • @Triple_A1
    @Triple_A1 ปีที่แล้ว

    This is a great work but am having challenges on it cause the auto didn't function well on my system after checking it thoroughly. Please is their a way you can help me on this?
    Keep up the good work 👍👍👍

  • @shubhammorvekar5557
    @shubhammorvekar5557 3 ปีที่แล้ว

    This is great 👌

    • @CodingSnow
      @CodingSnow  3 ปีที่แล้ว

      Thank you ❤️

  • @manhcuongvu5999
    @manhcuongvu5999 3 ปีที่แล้ว +1

    Thanks for your very useful video. Can you make cycle and dragable slider pls. Hope to see your tutorial soon dear.

    • @yuktagajeshwar2536
      @yuktagajeshwar2536 2 ปีที่แล้ว

      th-cam.com/video/YCD617NrtEw/w-d-xo.html
      th-cam.com/video/TBdroZTX1kY/w-d-xo.html
      Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...

  • @chibuikeoffu
    @chibuikeoffu 3 ปีที่แล้ว

    Thank you very much, amazing work

  • @TheyyCallMeZack
    @TheyyCallMeZack 2 ปีที่แล้ว

    I love it;

  • @LetsBland9411
    @LetsBland9411 2 ปีที่แล้ว

    Great video but Nothing is working for me I tried to do everything I don't know if my problem is on inspect I don't knw what to do there is a it to copy the butting and paste it in the code or what what did you do there?

  • @sazz.g
    @sazz.g 3 ปีที่แล้ว

    Hey thanks for the video. Just wondering where is this thing the parameter "manual" in "var manualNav = function(manual)" getting the value from? Am I missing something here?

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

    Thx, but my slider does not change the photo though i have done everything possible

  • @turkishmusic4585
    @turkishmusic4585 3 ปีที่แล้ว

    How I can add paragraph under of the slideshow , pls help nothing is shown what I should do to put paragraph under it

  • @michelletowner9884
    @michelletowner9884 3 ปีที่แล้ว +2

    Really enjoying this tutorial...I’ve got a question.. what do you have to download to check the slider is active? as I’ve tried to create a slider but the buttons don’t work for me.

  • @kchksj6163
    @kchksj6163 3 ปีที่แล้ว +1

    How do you add a play/pause button to it?

  • @djstyffhaiti
    @djstyffhaiti 2 ปีที่แล้ว

    good bro

  • @usamaali-ln7mr
    @usamaali-ln7mr ปีที่แล้ว

    Thanks bro❤

  • @devcode9715
    @devcode9715 4 ปีที่แล้ว +1

    thats cool

  • @engamer0787
    @engamer0787 2 ปีที่แล้ว

    So the problems is , when I slide manually it doesn't work on me, but when I go for inspection in chrome, active class for both slide and btn is working properly , but image doesn't slide . Why so

  • @mukeshyogibhakt6520
    @mukeshyogibhakt6520 3 ปีที่แล้ว

    Sir aap kon sa ye text editor use kar rahe jisme sath me output dikha raha hai naam bata dijiye

  • @romuloalves9349
    @romuloalves9349 4 ปีที่แล้ว +1

    Ótimo vídeo parabéns ✌.

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      Thank you! ❤

    • @yuktagajeshwar2536
      @yuktagajeshwar2536 2 ปีที่แล้ว

      th-cam.com/video/YCD617NrtEw/w-d-xo.html
      th-cam.com/video/TBdroZTX1kY/w-d-xo.html
      Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...

  • @nirmalas9939
    @nirmalas9939 3 ปีที่แล้ว +1

    thank you

  • @ValeraJava1
    @ValeraJava1 3 ปีที่แล้ว +1

    Thanks teacher, excellent class. I'm starting with this great language and I have a question, at minute 21:45 do you add [... active], what function or action does it perform? or what is your definition to investigate? Please. Thank you.

    • @CodingSnow
      @CodingSnow  3 ปีที่แล้ว +4

      Thanks and welcome! Glad you like it.
      [...active] = all active classes
      It is for each of all current active classes to remove their active classes on timeout.
      Read this -
      developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

    • @yuktagajeshwar2536
      @yuktagajeshwar2536 2 ปีที่แล้ว

      th-cam.com/video/YCD617NrtEw/w-d-xo.html
      th-cam.com/video/TBdroZTX1kY/w-d-xo.html
      Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...

  • @OMER3-1-3
    @OMER3-1-3 3 ปีที่แล้ว +1

    I am getting this error in javascript "let current slide = 1; " can anyone can help and one more this how I can put this slider in my already made site thank you so much.

  • @Erika-ks5lp
    @Erika-ks5lp 2 ปีที่แล้ว

    im trying to find the issue since yestarday. does anybody else's images disappear for no aparent reason? i've checked the code many times, but it just doesn't work. thanksfor the video, it's very clear

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

    can anyone send me the code i followed the video but now nothing is working

  • @stefancheroiu8732
    @stefancheroiu8732 ปีที่แล้ว +1

    hey man, best video ever. But i have a question, the automatic slide is working just fine but when it gets to the last picture, it doesn't start over again automatically and it throws me this error : script.js:33 Uncaught TypeError: Cannot read properties of undefined (reading 'classList') . Any suggestion how can i solve this ?

    • @financialdumps
      @financialdumps ปีที่แล้ว

      @brother even i am Getting same error..

    • @stefancheroiu8732
      @stefancheroiu8732 ปีที่แล้ว

      I solved the issue, actually i had an english problem… instead of “… .length”, i was typing “… .lenght” 😅😅

  • @jonauriel2010
    @jonauriel2010 4 ปีที่แล้ว +1

    Hi I wonder what is the code editor you use? I would appreciate if you told me, I already subscribed and I liked it

    • @jonauriel2010
      @jonauriel2010 4 ปีที่แล้ว

      Please

    • @jonauriel2010
      @jonauriel2010 4 ปีที่แล้ว

      I'm sorry if my English is horrible, I'm from Mexico, greetings

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      Thank you! ❤️. It's the atom editor.

    • @jonauriel2010
      @jonauriel2010 4 ปีที่แล้ว +1

      Thanks

  • @hoctottiengtrung
    @hoctottiengtrung 3 ปีที่แล้ว

    Hello everybody. I have a question that is in the video. "slides" is a Nodelist. Why did he use methods ( forEach ) ?

  • @NeighbourHeap
    @NeighbourHeap 2 ปีที่แล้ว

    After clicking on first button.. it's active last image and clicking on second button it's active last second image and wen i click third button,image is blank... please someone help

  • @speedcoding11
    @speedcoding11 3 ปีที่แล้ว

    There is a problem with this slider. Whenever I click a button it redirects but the loop continues from where it left

  • @patrick.1943
    @patrick.1943 3 ปีที่แล้ว

    Hi, nice video! How can I add that if slide is changed manually it won't chage it automatically for some time? Because sometimes when I click, it changes to in the same time next slide.

    • @yuktagajeshwar2536
      @yuktagajeshwar2536 2 ปีที่แล้ว

      th-cam.com/video/YCD617NrtEw/w-d-xo.html
      th-cam.com/video/TBdroZTX1kY/w-d-xo.html
      Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...

  • @sonalidixit6663
    @sonalidixit6663 3 ปีที่แล้ว

    sir how can we add those buttons vertically on the right side

  • @nat17380
    @nat17380 4 ปีที่แล้ว +1

    can you add next and previous navigation arrows to this please?

    • @CodingSnow
      @CodingSnow  3 ปีที่แล้ว

      Will do!

    • @CodingSnow
      @CodingSnow  3 ปีที่แล้ว

      Hello there, I designed a new image slider tutorial according to your request. Here's the link - th-cam.com/video/tphDji-XZCE/w-d-xo.html

  • @mukul13197
    @mukul13197 3 ปีที่แล้ว

    Please Please Please help!
    I have implemented the code . On page load image carousel works fine , on page reload also works the same . but when I routed to a different page through a button click and came back , the image carousel - ( Slide active ) property gets out of sync . The time frame remains 10s , but as soon as a slide becomes active , after 2 seconds only 'active' gets removed , and for 8 seconds we can only see the image slider background of grey color.
    I thought it was because of some memory spillage , so I destroyed the component and function as soon as I move out of the current component where Carousel is being used ( using ngOnDestroy ) , but that didnt solve anything. On page reload again when Image Carousel Component loads, it again works as it should properly, its just during routing to another page and back , that the slide active property gets out of sync ! Please help

  • @christianbaffour7921
    @christianbaffour7921 3 ปีที่แล้ว

    i love you .thanks

    • @CodingSnow
      @CodingSnow  3 ปีที่แล้ว

      You're welcome 😊

  • @matteolu
    @matteolu 3 ปีที่แล้ว

    Hey - great Video! I love the look of the slider! Am I allowed to use this in my own project?

    • @CodingSnow
      @CodingSnow  3 ปีที่แล้ว +1

      Thank you! Okay, you can use it.

  • @kamdanibwp
    @kamdanibwp 2 ปีที่แล้ว

    Everything is working great except
    when i tried to make slider full width to container and height auto
    my page content move upward behind the slider.
    there is not any float used in css, unable to figured what's causing this behaviour.
    Pleeeeeeaaaase suggest the solution.
    Thanks a LOT..!

    • @kamdanibwp
      @kamdanibwp 2 ปีที่แล้ว

      Al Hamdolillah!
      I figured out the solution for auto height of image slider and i am posting here for others in need.
      Instead of height property use aspect ratio with respect to your slider images.
      Coding Snow once again thanks for your work...
      Do Good and Have Good.

  • @kacperkepinski4990
    @kacperkepinski4990 3 ปีที่แล้ว

    how can i do different transitions in a loop?

  • @lira5809
    @lira5809 3 ปีที่แล้ว

    In active i have a prob in function(activeClass) error in there

  • @apoorvmishra1900
    @apoorvmishra1900 3 ปีที่แล้ว

    Hii
    auto navigation is perfectly working but during manual navigation slide 1 is not shown and last button shows no slide how to resolve this

    • @CodingSnow
      @CodingSnow  3 ปีที่แล้ว

      Hi, It will work, follow the tutorial and check the source code closely.

  • @gelexblazeshorts7679
    @gelexblazeshorts7679 2 ปีที่แล้ว

    or is it for soft pro or sotNice tutorialng

  • @dragosdimitrie7368
    @dragosdimitrie7368 3 ปีที่แล้ว

    hello! How can i make the photos to be full screen, not just a little like in the vid? Thx!

    • @amjad7436
      @amjad7436 ปีที่แล้ว

      object-fit: cover;

  • @epitomeofsalt1648
    @epitomeofsalt1648 4 ปีที่แล้ว

    I used this in some of my own prebuilt code and for some reason it wont go in the center. Any suggestions?

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      Try it by changing the selectors like below.
      body{
      height: 100vh;
      background: #1D212B;
      }
      .img-slider{
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 500px;
      margin: 10px;
      background: #1D212B;
      }

  • @mikailsumenoglu548
    @mikailsumenoglu548 3 ปีที่แล้ว

    Not Run mobile safari i need help thanks for reply.

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

    who can i set the image in full screen

  • @kieran2347
    @kieran2347 3 ปีที่แล้ว

    How do we add more slides or increase it? I just followed your carousel video, I played with it for a bit but cant seem to add more images or slides, tia

    • @CodingSnow
      @CodingSnow  3 ปีที่แล้ว +1

      You need to change the HTML code for additional images.

    • @kieran2347
      @kieran2347 3 ปีที่แล้ว +1

      @@CodingSnow Awesome. I was looking at the wrong side and figured it out. Thanks for your quick response. This one of the best channels I've come across.

    • @CodingSnow
      @CodingSnow  3 ปีที่แล้ว

      @@kieran2347 You're most welcome my friend.

  • @oxygen02
    @oxygen02 4 ปีที่แล้ว

    Hi, how can I speed up the waiting time for the next slide? (Refering to the autoplay part)

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      Hi, In the index.html file > line 104
      Set the time you want in milliseconds. On the tutorial it's 10000ms.

    • @oxygen02
      @oxygen02 4 ปีที่แล้ว

      @@CodingSnow Thank you! Keep up the great content. I appreciate it a lot as I just started learning web dev.

    • @CodingSnow
      @CodingSnow  4 ปีที่แล้ว

      @@oxygen02 You're welcome! ❤️

    • @yuktagajeshwar2536
      @yuktagajeshwar2536 2 ปีที่แล้ว

      th-cam.com/video/YCD617NrtEw/w-d-xo.html
      th-cam.com/video/TBdroZTX1kY/w-d-xo.html
      Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...

  • @georges-anthonyorsot6813
    @georges-anthonyorsot6813 8 หลายเดือนก่อน +2

    it doesn't work

  • @tabitasimorangkir3754
    @tabitasimorangkir3754 3 ปีที่แล้ว

    is this responsive?

  • @milissachalmers4940
    @milissachalmers4940 3 ปีที่แล้ว

    please explain line 97 in html.index. Thanks

  • @abdullahbhatti4571
    @abdullahbhatti4571 4 ปีที่แล้ว

    Can you make an admin panel plz

  • @piikachu196
    @piikachu196 2 ปีที่แล้ว

    How to preview

  • @testchannel7062
    @testchannel7062 3 ปีที่แล้ว

    is it responsive tho ?

  • @papigaming1180
    @papigaming1180 ปีที่แล้ว

    Yesssssssssssssssssssssss

  • @gauravey1722
    @gauravey1722 2 ปีที่แล้ว

    Doesn’t tNice tutorials program cost like 100$ ?

  • @sayalideep8688
    @sayalideep8688 3 ปีที่แล้ว +1

    Plz help me

  • @MuhammadUsman-fz7bt
    @MuhammadUsman-fz7bt 2 ปีที่แล้ว

    sir code