Multicolumn auto slide mobile

Store Design
, , ,
2

Hi,

By adding custom CSS and HTML, you can create an auto-sliding effect for a multi-column section on mobile devices in the Trade theme.

Example of custom css

@media only screen and (max-width: 767px) {
  .auto-slide-container {
    overflow: hidden;
    position: relative;
  }
  .auto-slide-wrapper {
    display: flex;
    flex-direction: row;
    animation: auto-slide 10s linear infinite;
  }
  .auto-slide-item {
    flex: 1 0 auto;
    min-width: 100%;
  }

  @keyframes auto-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
}

Example custom HTML