Build a JavaScript IMAGE SLIDER in 15 minutes! 🖼️

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

КОМЕНТАРІ • 36

  • @BroCodez
    @BroCodez  11 місяців тому +38

    // IMAGE SLIDER
    const slides = document.querySelectorAll(".slides img");
    let slideIndex = 0;
    let intervalId = null;
    document.addEventListener("DOMContentLoaded", initializeSlider);
    function initializeSlider(){
    if(slides.length > 0){
    slides[slideIndex].classList.add("displaySlide");
    intervalId = setInterval(nextSlide, 5000);
    }
    }
    function showSlide(index){
    if(index >= slides.length){
    slideIndex = 0;
    }
    else if(index < 0){
    slideIndex = slides.length - 1;
    }
    slides.forEach(slide => {
    slide.classList.remove("displaySlide");
    });
    slides[slideIndex].classList.add("displaySlide");
    }
    function prevSlide(){
    clearInterval(intervalId);
    slideIndex--;
    showSlide(slideIndex);
    }
    function nextSlide(){
    slideIndex++;
    showSlide(slideIndex);
    }


    Document











    .slider{
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
    }
    .slider img{
    width: 100%;
    display: none;
    }
    img.displaySlide{
    display: block;
    animation-name: fade;
    animation-duration: 1.5s;
    }
    .slider button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    padding: 10px 15px;
    background-color: hsla(0, 0%, 0%, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    }
    .prev{
    left: 0;
    }
    .next{
    right: 0;
    }
    @keyframes fade {
    from {opacity: .5}
    to {opacity: 1}
    }

    • @usereternalyt
      @usereternalyt 11 місяців тому +1

      bro when you will begin python again😮‍💨

    • @l213dhanesh3
      @l213dhanesh3 11 місяців тому +1

      React do bro

    • @cinna_talks
      @cinna_talks 11 місяців тому +2

      bro continue the react series please...

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

      O😂😆😆😆😃😃😃😀😀😀😁😁😁

  • @fixauto5434
    @fixauto5434 11 місяців тому +24

    I could never thank you more.
    I'm a student in prog at montreal and holy shit if I had you as a teacher I would have a perfect 100% attendance. You just get straight to the point and I love this so much. I usually don't comment but I'm at a point where I watch your videos even tho I don't need it. Keep up big love

  • @D12_Diederik
    @D12_Diederik 20 днів тому

    Awesome! Thank you. Adjusted it a tiny bit so I can have images with different sizes cover the slider div while being centered vertically and horizontally + added a small hover effect for the buttons. Great tutorial!

  • @umarmuzammil7332
    @umarmuzammil7332 6 місяців тому +3

    the best videos for creating slider using javascript for beginners, love you bro

  • @ntech2761
    @ntech2761 7 місяців тому

    Your coding is the real thing! I have been figuring it out, went to others (youtube) and still could not make my slides move without getting a gap! Thank you so much!

  • @Tariquejamallkr
    @Tariquejamallkr 8 місяців тому

    Thanks Bro code, you have fixed all my issues regarding slider in one video.

  • @mysticaccent
    @mysticaccent 11 місяців тому +1

    I hope you get more views (millions of them) again, because you deserve all the happiness in the world. about a year ago my friend suggested to me a channel called 'brocode' and I searched it up on youtube and that was the best decision I ever made. I am 15 now, they are teaching us java at school but I am also learning python from your tutorials. thank you bro. it's people like you that make a difference.

  • @abdulbasit9364
    @abdulbasit9364 7 місяців тому

    Love you brother 💓 finally I found after wasting many hours

  • @masengeshobruno-ug1fj
    @masengeshobruno-ug1fj 7 місяців тому +1

    thank you

  • @NawafXRMFC
    @NawafXRMFC 11 місяців тому +4

    very big fan and love your vids

  • @user-kr5so3xk8f
    @user-kr5so3xk8f 11 місяців тому

    Bro: Thank you, for taking the time to give me A private lessons. You helped me grow, I cc now you must have great parenting skills. I have much to learn from you. So I will get to work on my "eye of the tiger". Thank you bro once more.....

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

    Thanks for the video! Glad you explained things instead of using stupid music! You rock. 🚀

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

    thanks a lot

  • @Hairynigga776
    @Hairynigga776 11 місяців тому

    Can you make a Q&A video

  • @megcodm8961
    @megcodm8961 4 місяці тому +3

    can anyone help me im stuck at the initialize slider part it wont show the photo it keeps saing this Uncaught TypeError TypeError: Cannot read properties of undefined (reading 'classList')
    at initializeSlider i copied the exact same steps for the code but its not working

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

      same here bro, it didnt work

  • @laperplayz1388
    @laperplayz1388 11 місяців тому +1

    day #2 of asking: yo bro can you please make an advanced c++ tutorial that talks about vectors and polymorphism, encapsulation, abstraction, and the auto keyword, and also new features added to the latest version please.

    • @batteo3318
      @batteo3318 11 місяців тому +1

      Give a try at Ferrabacus' course for encapsulation but dude, our bro is one man you can't ask him stuff like the newest features of c++ while he's doing a Javascript course. There are specific channels for that or wikis online.

    • @laperplayz1388
      @laperplayz1388 11 місяців тому

      @@batteo3318 thank you for the channel

  • @pastori2672
    @pastori2672 11 місяців тому +20

    ah so this is how tiktok works

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

    My css file is getting errors for the padding, color, border, and cursor on the slider button. Anyone know what I might’ve done wrong.

  • @ExamAscent-k3r
    @ExamAscent-k3r 9 місяців тому

    Please help me reduce my image size. It is very big on screen. Entire code working fine. Thank you for yout

  • @abdulbasit9364
    @abdulbasit9364 7 місяців тому

    I wanna ask something brother how to connect my sql private server data with JavaScript made software

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

    Are you using classes cuz they are "less important" than id?

  • @BinaryMaestro1
    @BinaryMaestro1 11 місяців тому

    dont you think Arrays would be easier?

    • @BinaryMaestro1
      @BinaryMaestro1 11 місяців тому

      let x = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
      i = -1;
      //next
      document.getElementById("button3").onclick = function() {
      i = i + 1;
      if (i >= x.length) {
      i = 0
      };
      document.getElementById("h1").textContent = x[i];
      };
      //previous
      document.getElementById("button4").onclick = function() {
      i = i - 1;
      if (i < 0) {
      i = x.length - 1
      };
      document.getElementById("h1").textContent = x[i];
      }
      heres a project i did from your firsts videos and thats only a small part of the code tho
      also this is changing the h1 element name only because as i said its my old project

    • @peaklegacy146
      @peaklegacy146 10 місяців тому

      He's not doing what's easiest. He's teaching a lesson on how to apply skills to a situation

  • @thelavagod
    @thelavagod 11 місяців тому +1

    Early bro

  • @troonder6274
    @troonder6274 11 місяців тому

    F*ck, vette and JS in my recommendations. Good that's not November

  • @OdysseyAviation
    @OdysseyAviation 11 місяців тому

    9th comment

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

    Thank you