How to create horizontally scrollable card list

Not directly supported, but easily built. Works similar to paging in a grid.

Please send me sample code / example.

That should get you started.

docs.appian.com/.../user-list-pattern.html

But this is vertical list, I am looking for horizontal list

To make it horizontal, you would add a columnsLayout at line 23 and columnLayouts inside the foreach.

Important here is that this snippet renders a list and also covers paging. This is what you will want. Now you need to adapt it to horizontal.

{
  a!localVariables(
    local!userListPagingInfo: a!pagingInfo(startIndex: 1, batchSize: 3, sort: a!sortInfo(field: "user", ascending: true)),
    local!users: a!forEach(
      /* This directly references the ID of the Designers group. Instead of an ID, a constant *
       * should be used to reference the group you want to pull users from.                   */
      items: getdistinctusers(togroup(21)),
      expression: {user: fv!item}
    ),
    /* Since we're retrieving users from an Appian group instead of a query, we make our own datasubset */
    local!pagedUsers: todatasubset(local!users, local!userListPagingInfo),
    {
      {
        a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextHeader(
              text: "Team Members",
              size: "MEDIUM"
            )
          }
        ),
        a!columnsLayout(
          columns: a!forEach(
            items: local!pagedUsers,
            expression: a!columnLayout(
              contents: a!cardLayout(
                contents: a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!imageField(
                        images: { a!userImage(user: fv!item.user, link: a!userRecordLink(user: fv!item.user)) },
                        size: "SMALL",
                        style: "AVATAR"
                      ),
                      width: "MINIMIZE"
                    ),
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            /* This should be whatever you would use to display a user's name.  */
                            text: user(fv!item.user, "firstName") & " " & user(fv!item.user, "lastName"),
                            link: a!userRecordLink(user: fv!item.user),
                            linkStyle: "STANDALONE",
                            style: "STRONG"
                          ),
                          char(10),
                          a!richTextItem(
                            text: user(fv!item.user, "titleName"),
                            color: "SECONDARY"
                          )
                        }
                      )
                    )
                  },
                  alignVertical: "MIDDLE"
                )
              )
            )
          )
        ),
        a!richTextDisplayField(
          value: {
            a!richTextIcon(
              icon: "angle-double-left",
              link: a!dynamicLink(
                saveInto: {
                  a!save(local!userListPagingInfo.startIndex, 1),
                  a!save(
                    local!pagedUsers,
                    /* Since we're retrieving users from an Appian group instead of a query, we make our own datasubset */
                    todatasubset(arrayToPage: local!users, pagingConfiguration: local!userListPagingInfo)
                  )
                },
                showWhen: local!userListPagingInfo.startIndex <> 1
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!userListPagingInfo.startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            ),
            a!richTextIcon(
              icon: "angle-left",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    local!userListPagingInfo.startIndex,
                    if(
                      local!userListPagingInfo.startIndex - local!userListPagingInfo.batchSize < 1,
                      1,
                      local!userListPagingInfo.startIndex - local!userListPagingInfo.batchSize
                    )
                  )
                },
                showWhen: local!userListPagingInfo.startIndex <> 1
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!userListPagingInfo.startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            ),
            " ",
            a!richTextItem(
              text: {
                local!userListPagingInfo.startIndex,
                " - ",
                if(
                  local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1 > local!pagedUsers.totalCount,
                  local!pagedUsers.totalCount,
                  local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1
                )
              },
              size: "MEDIUM",
              style: "STRONG"
            ),
            a!richTextItem(
              text: {
                " of ",
                fixed(local!pagedUsers.totalCount, 0)
              },
              size: "MEDIUM"
            ),
            " ",
            a!richTextIcon(
              icon: "angle-right",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    local!userListPagingInfo,
                    a!pagingInfo(
                      startIndex: local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize,
                      batchSize: local!userListPagingInfo.batchSize
                    )
                  )
                },
                showWhen: local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1 < local!pagedUsers.totalCount
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1 < local!pagedUsers.totalCount,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            ),
            a!richTextIcon(
              icon: "angle-double-right",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    local!userListPagingInfo.startIndex,
                    /* When jumping to the last page, make sure that the startIndex is an even multiple of batch size. *
                     * This ensures that you have the same last page as if you had gotten there one page at a time.    */
                    if(
                      mod(local!pagedUsers.totalCount, local!userListPagingInfo.batchSize) = 0,
                      local!pagedUsers.totalCount - local!userListPagingInfo.batchSize + 1,
                      local!pagedUsers.totalCount - mod(local!pagedUsers.totalCount, local!userListPagingInfo.batchSize) + 1
                    )
                  )
                },
                showWhen: local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1 < local!pagedUsers.totalCount
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1 < local!pagedUsers.totalCount,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            )
          }
        )
      }
    }
  )
}

This is a great example of the paging functionality. I also like this pattern that is a nice UI for larger cards: https://docs.appian.com/suite/help/21.2/cards-as-list-items-pattern.html

One other thing to keep in mind is that you could also implement arrow links / buttons in the first and last columns that just increases / decreases your start index by 1 to simulate the carousel behavior you mentioned at the top.

This is a great example of the paging functionality. I also like this pattern that is a nice UI for larger cards: https://docs.appian.com/suite/help/21.2/cards-as-list-items-pattern.html

One other thing to keep in mind is that you could also implement arrow links / buttons in the first and last columns that just increases / decreases your start index by 1 to simulate the carousel behavior you mentioned at the top.