Summary Carousel with more than five items

Summary Carousel can show 5 items/row.

If you want to show more 5 items/row, you can use custom plugin, follow these steps.

Here, we will use List Section to sync posts in Summary Block, so you can show more 5 items/row (We will use CSS code to make List Style same as Summary Carousel)

Note: This will work with Blog Page or Product Page Only. If you use Summary Carousel with Events, this won’t work.

#1. First you need to find the Blog (or Store Page URL), which you used in the Summary Block.

In my example, we will use Store Page.

Click Gear icon

and here is Store Page URL Slug

#2. Add a List Section (in the position where you used the Summary Block Carousel)

Choose People > Choose Section with (i) info, it is List Section

Hover on Section > Click EDIT CONTENT

In Design > Choose Carousel > Set Columns. With List Carousel, you can set to 6 columns

Next, click Style to adjust Carousel Arrows

Choose Bottom – Right

#3. Install List Sync Plugin.

You can use code TUAN to get 10% discount.

Plugin will give you some code to add to Code Injection Header/Footer. Something like this.

#4. Edit List Carousel Section > Click Content > Title

Enter this: {sync=/store-2}

Result:

You can disable this option to prevent cut off images on both sides

#5. To increase number of columns > 6. You can use this code to Custom CSS box.

@media screen and (min-width:992px) {
section[data-section-id="66c304d0ec8151339f8baf37"] ul.user-items-list-carousel__slides {
    grid-template-columns: repeat(7,1fr) !important;
}
}

with section[data-section-id=”66c304d0ec8151339f8baf37″] is Carousel Section ID. Use this tool to find ID.

You can change number 7 to another number. Here 7 = 7 columns.

Result:

#6. To change arrow style, you can use this CSS code

/* Arrow Style */
.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-color: transparent !important;
}
button.user-items-list-carousel__arrow-button svg path {
    stroke: #000 !important;
}

To move it to Top Right position, use this CSS code

section[data-section-id="66c304d0ec8151339f8baf37"] .user-items-list-item-container {
    display: flex;
    flex-direction: column-reverse;
}