Vertical Demo


              // up direction
  new Marquee( '.marquee-up',{ 
    direction: 'up', 
    duration: 20 
  })

  // down direction
  new Marquee( '.marquee-down', { 
    direction: 'down', 
    duration: 40 
  })

HTML Markup


          <div class="marquee-up">
  <picture>
    <img src="./images/ecwid.webp" />
  </picture>
  <picture>
    <img src="./images/emoji.webp" />
  </picture>
  <picture>
    <img src="./images/shopify.webp" />
  </picture>
  <picture>
  <img src="./images/webflow.webp" />
  </picture>
</div>

Horizontal Demo



// you might need to apply css flex to .marquee-clone class;
.marquee-clone {
  display: flex;
  align-items: center;
}

// up direction
new Marquee( '.marquee-right', { 
  direction: 'right', 
  duration: 20 
})

// down direction
new Marquee( '.marquee-left', { 
  direction: 'left', 
  duration: 40 
})