Z
Z
zekin3752022-04-19 22:19:05
JavaScript
zekin375, 2022-04-19 22:19:05

How to determine which block to switch?



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 the question

In order to leave comments, you need to log in

3 answer(s)
S
Sergey, 2022-04-19
@zekin375

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);
  });
 });

D
Dmitry Verkhoumov, 2016-10-12
@L1nw0od

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 ;)

S
Savely Dzvonkevich, 2016-10-12
@Dzvonkevich

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question