How to determine which block to switch?

Question

JavaScript

There are three identical elements, with the switching buttons, the _active class is added, could you help how to make it so that when switching, the class changes only for the desired block

Answer 1

This is how you can fix the code. Collect all parents, go through them forEach and pass to on(parent)

document.addEventListener( "DOMContentLoaded" , function() {
  const on = (parent, event, selector, fn) => parent.addEventListener(event, ({target}) => {
         if(target = target.closest(selector)) fn(target)
     });
  const parents = document.querySelectorAll(".section-gallery-wrapper.flexbox");
  parents.forEach( parent => {
     //const on = (parent, event, selector, fn) => parent.addEventListener(event, ({target}) => {
     //    if(target = target.closest(selector)) fn(target)
     //});
     //const parent = document.querySelector(".section-gallery-wrapper.flexbox");
     const children  = parent.children;
     let index = [...parent.children].indexOf(parent.querySelector("._active"));
     const show = ({dataset : {up}}) => {
       children[index].classList.remove("_active");
       index = (Number(up) + index + children.length) % children.length;
       children[index].classList.add("_active");
     };
     //on(document, "click", "[data-up]", show);
    on(parent, "click", "[data-up]", show);
  });
 });

Answer 2

Not similar, but exactly the same as on the specified site: fotorama.io
For the future, sometimes try to look at the source code of the site, that's where I found out about this library ;)

Answer 3

Можно реализовать на slick carucel. Почитай документацию, там детально описано