MayaViolet Posted October 26, 2022 Share Posted October 26, 2022 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) Link to comment
Ziggy Posted October 27, 2022 Share Posted October 27, 2022 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 tuanphan 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
MayaViolet Posted October 27, 2022 Author Share Posted October 27, 2022 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
Ziggy Posted October 27, 2022 Share Posted October 27, 2022 I think it does make sense but I'm not sure how to achieve that! I might need to sleep on it! MayaViolet 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
MayaViolet Posted October 27, 2022 Author Share Posted October 27, 2022 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! Link to comment
Ziggy Posted October 28, 2022 Share Posted October 28, 2022 I can't see the arrows this morning, are there only 3 events in the block at the moment? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
mbockmaster Posted April 28 Share Posted April 28 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! Link to comment
MayaViolet Posted April 28 Author Share Posted April 28 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; } Link to comment
mbockmaster Posted April 28 Share Posted April 28 Oh, my, gosh! You are such a gem. I have been searching high and low for this for so long! Thank you SO much!! MayaViolet 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment