What's your biggest current challenge? Have your say in Community Polls along the right column.

Multicolumn autoslide on mobile

Multicolumn autoslide on mobile

ecommfirst
Shopify Partner
70 0 15

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

 

 

 

Replies 2 (2)

Small_Task_Help
Shopify Partner
830 28 75

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();
});
To Get Shopify Experts Help, E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Expert Agency
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad
ecommfirst
Shopify Partner
70 0 15

Thank you! where can I add the javascript code?