Question 205473 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Slider controllers

I’m trying to make an slider with two types of controllers (dots, and slide names).
I’m finding troubles trying to make this two controllers react at the same time. When clicking the dot controller number 2 an active class is add to the dot. At the same time the slide name controller number 2 should have that active class. I’m stuck 🙁enter image description here

var sliderName = document.getElementsByClassName("slider-name");
var sliderDot = document.getElementsByClassName("slider-dot");
for (var i = 0; i < sliderName.length; i++) {
   sliderName[i].addEventListener("click" , function clickBtn() {
      this.classList.toggle("slider-btn-active");
      sliderDot[i].classList.toggle("slider-btn-active");
      /*var test = this.parentElement.previousElementSibling.children[i];
      alert(test);
      this.parentElement.previousElementSibling.children.classList.toggle("slider-btn-active");*/
   });
}
Tags:

2

Answers


  1. 0

    If I’m understanding you correctly, you want the classes to toggle both when clicking the sliderName and the sliderDot?

    You could create a goToSlide function by itself and use it for both clicks on the sliderName and the sliderDot.

    var sliderName = document.getElementsByClassName("slider-name");
var sliderDot = document.getElementsByClassName("slider-dot");

function goToSlide(slideIndex) {
  sliderName[slideIndex].classList.toggle("slider-btn-active");
  sliderDot[slideIndex].classList.toggle("slider-btn-active");
}

for (let i = 0; i < sliderName.length; i++) {
  sliderName[i].addEventListener("click" , function () {
     goToSlide(i);
  });
  
  sliderDot[i].addEventListener("click" , function () {
     goToSlide(i);
  });
}
    Login or Signup to reply.
  2. 0

    This begs for delegation

    Without seeing the rest of the HTML, here is one that syncs the two sets

    const sliderContainer = document.getElementById('sliderContainer'); // or whatever is the selector for the closest common container
const dots = sliderContainer.querySelectorAll(".slider-dot");
const buttons = sliderContainer.querySelectorAll(".slider-name");
sliderContainer.addEventListener("click", (e) => {
  const tgt = e.target;
  const isDot = tgt.matches(".slider-dot");
  const isName = tgt.matches(".slider-name");
  if (!isDot && !isName) return // not a dot or a button
  dots.forEach((dot, i) => {
    dot.classList.toggle("slider-btn-active", isDot ? tgt === dot : tgt === buttons[i])
  });
  buttons.forEach((button, i) => {
    button.classList.toggle("slider-btn-active", isDot ? tgt === dots[i] : tgt === button)
  });
});
    .slider-btn-active {
  color: red;
}
    <div id="sliderContainer">
  <span class="slider-dot">*</span>
  <span class="slider-dot">*</span>
  <span class="slider-dot">*</span>
  <span class="slider-dot">*</span>
  <span class="slider-dot">*</span><br/>
  <span class="slider-name">*</span>
  <span class="slider-name">*</span>
  <span class="slider-name">*</span>
  <span class="slider-name">*</span>
  <span class="slider-name">*</span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search