Summary Carousel Customization

I am trying to customize my summary carousel, There doesn't seem to be a way to make the projects that are showing any bigger, as well as customize the gutter width between them? space them out. does anyone know if this is possible? I seem to also have to have it set for 3 rows if I want to show 2 items side by side but if i set it to 2 rows it stacks? makes no sense to me.

I'm using this code to center it since it wouldn't sit centered on its own, and I cant seem to add spacing.

.sqs-block-summary-v2 .summary-item-list {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

 I have no idea where the arrows on the summary are to show the rest? I've removed all the css and refreshed the site and still no arrows. I've talked to customer help and they said everything looks good on their end so I have no idea what that's about and I haven't been able to find anything on this.

also, curious if its possible to show the hidden items in a summary as well? like what would be "off the page" I've attached a screen shot so it might make more sense, but wondering if this was doable on a squarespace site if anyone knows?

my site is: https://flugelhorn-seahorse-lzrb.squarespace.com/config/

pw: design

The gallery block has a slideshow reel option that sounds like what you want. The Gallery block has to have images/links manually added to it however - you will not be able to automagically link it to your blog.  It would be good in this case if it's just going to show some featured posts - I don't know that I would use it if you are going to have to constantly update it for new/live posts though.  

For the Gallery you currently have:

The css that changes the way the flex items are spaced out is justify-content.  You could try changing that to space-around, or space-between.  This will use Flex's magic to do it automatically.  If this is not what you are after, you would need to rely on setting margins, with something like:

 

/* this only works if there will only be 2 items displayed */


.sqs-block-summary-v2 .summary-item-list >.summary-item ~.summary-item{ 
  margin-left: 150px
}


/* or using last child */

.sqs-block-summary-v2 .summary-item-list .summary-item:last-child {
  margin-left:150px;
}

I'm sure there is a more eloquent selector to use, but this just gives an example to see if it is what you are looking for.

Fiddling with the options for gallery - you could make it 4 items and space the left and right to the sides in order to achieve your offscreen choices - not really  an actual slider that is going to show all your posts in a carousel though.

Something like this?

.sqs-block-summary-v2 .summary-item-list .summary-item:first-child{
  margin-left:-150px;
  margin-right:125px;
}

.sqs-block-summary-v2 .summary-item-list .summary-item:last-child {
  margin-left:100px;
}

.sqs-block-summary-v2 .summary-item-list .summary-item:nth-child(3){
  margin-left:50px;
}

Hi @IgnitePerth thanks for the feedback and suggestions. I gave it a try, its not exactly what I was looking to do but I see how it could work. I think I just need to play around with it for awhile and stick within squarespaces means for now. As this only goes back and forth and not a continuous carousel starting back at the start, as well as it still stays "contained" within the summary container if that makes sense. I thought maybe there was a way to just show what was sitting out side the summary block without changing the number of projects showing.

and It will also be an updating thing so probably should stick with something that's easy to edit

appreciate the attempt though!

On 8/5/2021 at 10:44 PM, jenniferboddam said:

I think I just need to play around with it for awhile and stick within squarespaces means for now.

I'd love to see what you come up with - really digging your layout!