Display a list items as carousel

Pods Item Lists can refer to any content and can display any HTML.

Most JavaScript carousel libraries have a default option to automatically run on a certain HTML structure and class name.

Pick any popular carousel library, dd it to the site theme, with a Code Snippets plugin on the wp_footer or wp_enqueue_scripts actions, then write the Pods Item List template according to the template example provided by the carousel script.

For example, with the WebComponent version of SwiperJS:

Add SwiperJS to the frontent:

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>

Refer to their example template:

<swiper-container
  slides-per-view="3"
  grid-rows="3"
  mousewheel-force-to-axis="true"
>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper-container>

Populate it with information from Pods using magic tags:

List Block Before field:

<swiper-container
  slides-per-view="3"
  grid-rows="3"
  mousewheel-force-to-axis="true"
>

Block template:

<swiper-slide>
{@_thumbnail_id,wp_get_attachment_url}<br/>
{@post_title}
</swiper-slide>

…where wp_get_attachment_url would need to be added to allowed display callback functions near the bottom of Pods Admin. > Settings, and will return the largest version of the image. For smaller thumbnail sizes, either an image field should be used so {@field_name._src.medium} syntax is available, or a custom helper function should be written to get the post thumbnail at a different size.

List Block After field:

</swiper-container>