Jump to content

Summary Carousel, Events - reverse transform:translate order on click?

Recommended Posts

Hi all -

I am trying to implement an event summary carousel where the order is reversed so that the most recent event shows up first, on the right end of the carousel, rather than the left (see mockup below).

I have been able to flip the order of the items by using flexbox, and move the arrow position, but when the arrow is clicked I would like the action to trigger a movement of the carousel items to the left rather than to the right. I understand this has to do with the summary-item-list's transform: translateX(-101%) property, but not sure how to implement this for the on-click action?


Is this possible?

Site URL here (pw= test)

Screen Shot 2022-10-26 at 3.56.15 PM.png

Link to comment
7 hours ago, Ziggy said:

hi @MayaViolet, check out this plugin, it should allow you to change the order in a summary block: https://www.squarewebsites.org/squarespace-plugins/lazy-summaries

Hi @Ziggy, thanks for the suggestion - I actually wrote that off at first assuming that the "Newest>Oldest" sort by function applied to creation date, not event date, but I tested it out and it does seem to work.


The only issue now however, is that if I set it as showing up "Older > Newer" so that the oldest date is on the left, and the newest is on the right to match my mockup, I still need to find a way to reverse the carousel trigger function, so that it starts by showing the right edge of the content list, with the option to navigate to the left as opposed to the default, which is starting from the left edge of the content list, and navigating to the right... does that make sense?

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.