Jump to content
Search Community

Marquee Effect Cards

Gvnn test
Moderator Tag

Go to solution Solved by alig01,

Recommended Posts

Hello, I am building a website with vue 3 and i want a section to have this marquee effect (products scrolls infinitely + responsive). But i am having trouble to build it. can you help me? Thank you so much!

vue verison 

See the Pen bGOENjy by berkegvn (@berkegvn) on CodePen


i want something like this one, stops when hover and drag to move both sides.

See the Pen ZEqdMmr by animaticss (@animaticss) on CodePen


HTML SCSS version

See the Pen MWZKYvY by berkegvn (@berkegvn) on CodePen

Link to comment
Share on other sites

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you. 


You probably want to use our Seamlessly loop elements along the x-axis helper function, but if you're new to the tools I would advise first getting a bit more familiar with them. Check out the amazing starter guides below"




After you've tried somethings, post back here if you're stuck with the Javascript that is not working. 

  • Like 3
Link to comment
Share on other sites

  • Solution



I have adapted the codepen for your needs, the code for the drag direction change is from this thread answer, as I knew someone already asked the same question (the benefits for lurking around the forum).


Only thing left was the hovering logic.

See the Pen PoXNOEG?editors=0010 by alig01 (@alig01) on CodePen



Hope this helps and good luck with your project.


  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...