Multicolumn autoslide on mobile

Store Design
, , , , , ,
1

Hi All, is it possible to make the multicolumn section auto slide on mobile? see below, any help appreciated, thank you.

Screenshot 2024-07-29 at 10.02.27.png
Screenshot 2024-07-29 at 10.02.27.png2372×586 98.1 KB

2

Hi,

Add CSS to style multicolumn section for horizontal scrolling.
Use JavaScript for auto-sliding effect.

Example of css code

@media only screen and (max-width: 767px) {
  .multicolumn-container {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
  }
  
  .multicolumn-item {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
}

Example of javascript code

document.addEventListener("DOMContentLoaded", function() {
  const sliderContainer = document.querySelector('.multicolumn-container');
  const sliderItems = document.querySelectorAll('.multicolumn-item');
  let currentIndex = 0;
  const slideDuration = 3000; // Duration of each slide in milliseconds

  function slide() {
    if (sliderContainer && sliderItems.length > 0) {
      sliderContainer.style.transition = 'transform 1s ease-in-out';
      sliderContainer.style.transform = `translateX(-${currentIndex * 100}%)`;

      currentIndex = (currentIndex + 1) % sliderItems.length;

      setTimeout(slide, slideDuration);
    }
  }

  slide();
});
3

Thank you! where can I add the javascript code?