Summary Carousel with more than five items

[tuanphan]

Summary Block Carousel can show 5 items/row.
If you want to show more 5 items/row, 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).

#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 (we can use below code to increase column > 6)

Next, click Style to adjust Carousel Arrows

Choose Bottom - Right

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

Enter this: {sync=/store-2}

#4. Install List Sync Plugin. Plugin will sync List Carousel with Product Page.
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.

#5. Result

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

#6. 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.

#7. 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;
}