Question 258132 in Html Question posted in
Some basic documentation can be found here.

Html – Have any paralel option for javascript querySelector

I’m figuring out How I can select the current class by pure js, I building a video slider have multiple videos, query selector works perfectly for one video, adding more videos querySelector selection first element, but the slide dynamically changes the HTML class to the next div.

var slide = 0,
    slides = document.querySelectorAll('.cover-background > .video_container'),
    numSlides = slides.length;

    //Functions!!
    currentSlide = function() {
      var itemToShow = Math.abs(slide % numSlides);
      [].forEach.call(slides, function(el) {
        el.classList.remove('current_video')
      });
      slides[itemToShow].classList.add('current_video');
      resetProgress();
      resetInterval();
    },         
    next = function() {
      slide++;
      currentSlide();
    },
    prev = function() {
      slide--;
      currentSlide();
    },
    resetProgress = function() {
      var elm = document.querySelector('.progressbar'),
          newone = elm.cloneNode(true),
          x = elm.parentNode.replaceChild(newone, elm);
    },
    resetslide = function() {
      var elm = document.querySelector('#slides > li'),
          newone = elm.cloneNode(true),
          x = elm.parentNode.replaceChild(newone, elm);
    },
    resetInterval = function() {
      clearInterval(autonext);
      autonext = setInterval(function() {
        slide++;
        currentSlide();
      }, 10000);
    },
    autonext = setInterval(function() {
      next();
    }, 10000);
    let video = document.querySelectorAll(".current_video > .video");
    console.log(video);
    video.autoplay = true;
    video.load();
    <div class="cover-background">
                <div id="first" class="video_container current_video" data-key="0">
                    <video class="video"  width="100%" height="auto" autoplay loop muted>
                        <source src="videos/video_1.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div id="second" class="video_container" data-key="0">
                    <video class="video"  width="100%" height="auto" autoplay loop muted>
                        <source src="videos/video_2.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div> 
                <div id="third" class="video_container" data-key="0">
                    <video class="video"  width="100%" height="auto" autoplay loop muted>
                        <source src="videos/video_3.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>  
            </div>

.current_video class dynamically move to next slide. the console log always gets the first one. also tried with querySelectorAll and getElementsByClassName() I’m looking a pure javascript solution.

Tags:

2

Answers


  1. 0

    In case you want to progress through your slider after a set interval then you can do that in a much simpler way:

    let slide=0, slides=document.querySelectorAll('.cover-background > .video_container');

let auto;
function startSl(){
 stopSl();
 auto=setInterval(nextSl, 1000);
}
function stopSl(){
 clearInterval(auto);
}
function nextSl(){
  slides[slide].classList.remove("current_video")
  slide=(slide+1)%slides.length;
  slides[slide].classList.add("current_video")
}
startSl();
document.querySelectorAll("button").forEach((b,i)=>b.onclick=[startSl,stopSl][i]);
    .current_video {border: 2px solid red}
    <button>start</button><button>stop</button>
<div class="cover-background">
 <div id="first" class="video_container current_video" data-key="0">
  <img src="https://picsum.photos/id/20/120/80">
 </div>
 <div id="second" class="video_container" data-key="0">
  <img src="https://picsum.photos/id/21/120/80">
 </div> 
 <div id="third" class="video_container" data-key="0">
  <img src="https://picsum.photos/id/22/120/80">
 </div>  
</div>

    In this snippet I replaced the videos by images and made the .current_video class have a red border.

    Login or Signup to reply.
  2. 0

    Modified the code by adding the querySelector inside the function that is called when the current_video class is added. This ensures that the function is called whenever the class is added, providing a simpler and more efficient workaround.

    var slide = 0,
    slides = document.querySelectorAll('.cover-background > .video_container'),
    numSlides = slides.length;

    //Functions!!
    currentSlide = function() {
      var itemToShow = Math.abs(slide % numSlides);
      [].forEach.call(slides, function(el) {
        el.classList.remove('current_video')
      });
      slides[itemToShow].classList.add('current_video');
      checkup(); // Call checkup function when current_video class is added
      resetProgress();
      resetInterval();
    },         
    next = function() {
      slide++;
      currentSlide();
    },
    prev = function() {
      slide--;
      currentSlide();
    },
    resetProgress = function() {
      var elm = document.querySelector('.progressbar'),
          newone = elm.cloneNode(true),
          x = elm.parentNode.replaceChild(newone, elm);
    },
    resetslide = function() {
      var elm = document.querySelector('#slides > li'),
          newone = elm.cloneNode(true),
          x = elm.parentNode.replaceChild(newone, elm);
    },
    resetInterval = function() {
      clearInterval(autonext);
      autonext = setInterval(function() {
        slide++;
        currentSlide();
      }, 10000);
    },
    autonext = setInterval(function() {
      next();
    }, 10000);
    
    function checkup(){ // wrapped inside function
    let video = document.querySelector(".current_video > .video");
    console.log(video);
    video.autoplay = true;
    video.load();
    };
    checkup() // initial call
    .current_video {border: 2px solid red}
.video_container {
    width: 100px;
    height: 100px;
    display: inline-flex;
}
        <div class="cover-background">
                <div id="first" class="video_container current_video" data-key="0">
                    <video class="video"  width="100%" height="auto" autoplay loop muted>
                        <source src="videos/video_1.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div id="second" class="video_container" data-key="0">
                    <video class="video"  width="100%" height="auto" autoplay loop muted>
                        <source src="videos/video_2.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div> 
                <div id="third" class="video_container" data-key="0">
                    <video class="video"  width="100%" height="auto" autoplay loop muted>
                        <source src="videos/video_3.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>  
            </div>

    Hope it helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search