Responsive slides in horizontal scroll

hi! I have a section of three identical divs wrapped in a section which act as a slides in horizontal scroll.

I also need to make some dom elements of these div slides to change their order in response to screen resolution change.

I’ve produced a script which repositions the elements inside one of these divs before I knew that there are going to be three of them. Here is it:

// repositionHighwaySelectorForMobile

const highwaySection = document.querySelector(".highway");
const highwayTitle = document.querySelector(".highway__title");
const highwayPicSelector = document.querySelector(
  ".highway__slider-buttons-container"
);
const mobileTitleAndSelectorWrapper = document.createElement("div");
const highwayMobileLine = document.querySelector(".highway__mobile-line");
const highwayArrowLeftContainer = document.querySelector(
  ".highway__slider-button-left"
);
const highwayArrowRightContainer = document.querySelector(
  ".highway__slider-button-right"
);

function repositionHighwaySelectorForMobile() {
  if (breakPoint.matches) {
    mobileTitleAndSelectorWrapper.classList.add(
      "highway__title-and-selector-wrapper"
    );
    highwayMobileLine.after(highwayTitle);
    highwayTitle.after(mobileTitleAndSelectorWrapper);
    mobileTitleAndSelectorWrapper.appendChild(highwayTitle);
    mobileTitleAndSelectorWrapper.appendChild(highwayPicSelector);
    mobileTitleAndSelectorWrapper.style.display = "flex";
    mobileTitleAndSelectorWrapper.style.flexDirection = "row";
    mobileTitleAndSelectorWrapper.style.justifyContent = "space-between";
    mobileTitleAndSelectorWrapper.style.alignItems = "center";
    mobileTitleAndSelectorWrapper.style.marginBottom = "5px";

    highwayArrowLeftContainer.style.width = "24px";
    highwayArrowLeftContainer.style.height = "24px";
    highwayArrowRightContainer.style.width = "24px";
    highwayArrowRightContainer.style.height = "24px";
  } else {
    highwayArrowLeftContainer.style.width = "50px";
    highwayArrowLeftContainer.style.height = "50px";
    highwayArrowRightContainer.style.width = "50px";
    highwayArrowRightContainer.style.height = "50px";

    highwaySection.prepend(highwayTitle);

    mobileTitleAndSelectorWrapper.remove();

    highwaySection.appendChild(highwayPicSelector);
  }
}

repositionHighwaySelectorForMobile();

breakPoint.addEventListener("change", () =>
  repositionHighwaySelectorForMobile()
);

the problem is that it takes only first slide in, and I need to apply it to each one of them. How can I do that?

https://files.slack.com/files-pri/TPV9DP0N4-F0459FLA3RV/image.png

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.