Colby Slideshow

A slideshow class built on React and Slick Carousel, using the WordPress REST API for media.

Usage

Install with NPM:

npm install --save colby-slideshow

Import the Sass file:

// Use path to node_modules in current project.
@import '../../node_modules/colby-slideshow/src/sass/main.scss';

Import it into the JavaScript project, and use ReactDOM to hook it into one or more DOM elements:

import React from 'react';
import { render } from 'react-dom';

import Slideshow from 'colby-slideshow';

window.addEventListener('load', () => {
  const slideshows = document.querySelectorAll('.colby-slideshow');

  if (!slideshows) {
    return;
  }

  [].forEach.call(slideshows, renderSlideshow);
});

function renderSlideshow(slideshowElement) {
	const props = {};

	// Convert the element's data attributes to props.
	[].forEach.call(slideshowElement.attributes, attribute => {
		if (attribute.name.indexOf('data-') === 0) {
			props[attribute.name
				.replace('data-', '')
				.replace(/-/g, '_')] = attribute.value;
		}
	});

	if (!props.ids) {
		return;
	}

	// Requires current site URL, by wp_localize_script or otherwise.
	props.url = `${wpData.bloginfoUrl}/wp-json/wp/v2/media?include=${props.ids}`;

	render(<Slideshow {...props} />, slideshowElement);
}

In WordPress

One approach is to add a special attribute to a built-in WordPress gallery shortcode, e.g.:

[gallery ids="2789,2790,2791,2792,2793,2794" colby-slideshow="1"]

add_filter( 'post_gallery', function( $output, $atts ) {
	if ( ! isset( $atts['colby-slideshow'] ) || ! isset( $atts['ids'] ) ) {
		return '';
	}

	$ids = esc_attr( $atts['ids'] );

	return "<div class=colby-slideshow data-ids=\"$ids\"></div>";

}, 10, 2 );