Slider

Add a slider above your posts on an API list page.

To add a slider, go to Custom Pages in the app customizer. Select your list page, or create a new one.

Select "enable slider" and add an API route.

You can add any WP-API endpoint, along with optional custom parameters. For more information about endpoints, please see this document.

To display a limited number of slides, use the per_page parameter as shown above.

Slide Background Images

By default, the slides will show a featured image as the slide background, and the post title. Featured images will display by default on normal posts, but if you are using a custom post type you must add support for these images.

Add this code to a custom plugin:

/**
* Add featured image urls to post response
* Default is to show media ID, but then you have to do another http request to get the image for an app. This allows you to just use the url.
* Sample usage would be post.featured_image_urls.thumbnail
*/
add_action( 'rest_api_init', 'appp_add_more_featured_urls' );
function appp_add_more_featured_urls() {
	// change the items below to your CPT slug(s)
	register_api_field( array( 'sponsor', 'speaker', 'schedule', 'sermons' ),
	    'featured_image_urls',
	    array(
	        'get_callback'    => 'appp_more_featured_images',
	        'update_callback' => null,
            'schema'          => null,
	    )
	);
}


function appp_more_featured_images( $post ) {

    $featured_id = get_post_thumbnail_id( $post['id'] );

	$sizes = wp_get_attachment_metadata( $featured_id );

	$size_data = new stdClass();
			
	if ( ! empty( $sizes['sizes'] ) ) {

		foreach ( $sizes['sizes'] as $key => $size ) {
			// Use the same method image_downsize() does
			$image_src = wp_get_attachment_image_src( $featured_id, $key );


			if ( ! $image_src ) {
				continue;
			}
			
			$size_data->$key = $image_src[0];
			
		}

	}

	return $size_data;
}

Customizing the Slider

You can customize the slider display using custom CSS under the Colors tab in the app customizer.

Some relevant CSS classes you might need:

.post-list ion-slides ion-slide {
/* your styles here, for example... */
background-image: none;
}
.post-list ion-slides .slide-title {
/* your styles here, for example... */
background: red;
color: white; }

You can use a browser inspector for more CSS classes.

Custom Slide Content

If you would like to display custom content in your slides, such as a post excerpt, you can do that with a template hook.

The slider has a post_list.slide_content hook, see how to use it here.