Jump to content

GALLERY SECTION AUTO-SCROLLING CAROUSEL EXTENDS OUTSIDE OF WEBPAGE

Recommended Posts

I've successfully added CSS code to have an auto-scrolling logo carousel. I created the effect by creating two files that are 3000px wide X 300px H using a Canva template with the logos spaced evenly instead of uploading individual logos to avoid spacing issues.

For some reason, the auto-scroll is showing off of the webpage when I scroll my mouse to the right. I cannot figure out how to fix this! Help! I created the effect by using the following code to custom CSS.

 

/* Infinite Logo Scroll */
#SECTIONID .gallery-reel-list {
  animation: scroll 20s linear infinite;
  display: flex;
  width: 3000px;
  overflow: visible;
}

@keyframes scroll {
	0% { 
      transform: translateX(0); 
  }
	100% { 
     transform: translateX(-1500px);
  }
}

 

 

image.thumb.png.7225ef37cd3cc334ae53b10aac1502e2.png

 

Link to comment
  • Replies 4
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Both of these are causing the problem, but that overflow is inherent to the way you're trying to do this:

  width: 3000px;
  overflow: visible;

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.