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

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)

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

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?

I think it does make sense but I'm not sure how to achieve that! I might need to sleep on it!

Same haha, regardless thanks for your brainpower on the matter! If you come up with any ideas, I'm all ears. And if I find a solution I'll update this thread. Thanks @Ziggy!

I can't see the arrows this morning, are there only 3 events in the block at the moment?

So glad I found this thread! I've installed Lazy Summaries 🙂 . @MayaViolet, may I ask how you were able to change the transition speed of your carousels? It's so much nicer than the default! 

53 minutes ago, mbockmaster said:

So glad I found this thread! I've installed Lazy Summaries 🙂 . @MayaViolet, may I ask how you were able to change the transition speed of your carousels? It's so much nicer than the default! 

@mbockmaster try this code! Lmk if it doesn't work 🙂

/* Carousel Smooth Scroll */
.sqs-gallery-design-carousel .sqs-gallery {
    transition: -webkit-transform ease 2s;
    -webkit-transition: -webkit-transform ease 2s;
    -o-transition: transform ease 2s;
    transition: transform ease 2s;
  transition: transform ease 2s, -webkit-transform ease 2s;
  }

Oh, my, gosh! You are such a gem. I have been searching high and low for this for so long! Thank you SO much!!