Reverse Column Order

Ask the Community Customization
1

Hey Max, can you please provide guidance on how to make this work for the Carousel Pricing Table?

2 Likes
2

Hi there, @user11212 :waving_hand:

You’re right! After one of the widget updates the class names have been changed, this is why the code isn’t working anymore.

I’ve forwarded your request to the devs and will let you know once I have their response :slightly_smiling_face:

1 Like
4

Hi there, @user11212 :waving_hand:

Thank you for waiting!

Please add this code to the Custom JS field on the Appearance tab of your widget’s settings:

const waitForElement = (selector, root = document) => new Promise(res => {
  const observer = new MutationObserver(() => {
    const element = root.querySelector(selector);
    if (element) {
      res(element);
      observer.disconnect();
    }
  });

  observer.observe(root, {
    childList: true,
    subtree: true
  });
});

const COLUMNS_NUMBER = 3;

function clickEl(el, number) {
  for (let i = number; i > 0; i--) {
    el.click();
  }
}

waitForElement('.es-layout-carousel-snap-carousel').then(() => {
  if (window.innerWidth > 520) {
    return;
  }

  const next = document.querySelector('div[aria-label*=Next] div');
  clickEl(next, COLUMNS_NUMBER);
});

And this code should be added to the Custom CSS field on the Appearance tab:

@media (max-width: 521px) {
  .es-snap-carousel-wrapper {
    transform: scaleX(-1);
  }

  .es-column-container {
    transform: scaleX(-1);
    backface-visibility: hidden;
  }
}

Try it out and let me know if you like the result :slightly_smiling_face:

2 Likes