# colby-slideshow

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

Latest version **1.0.32** (published 2017-03-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install colby-slideshow
pnpm add colby-slideshow
yarn add colby-slideshow
bun add colby-slideshow
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.32 |
| Published | 2017-03-09 |
| First published | 2017-03-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | John Watkins |
| Maintainers | johnwatkins0 |

## Links

- npm: https://www.npmjs.com/package/colby-slideshow
- Repository: https://github.com/ColbyCommunications/colby-slideshow
- Homepage: https://github.com/ColbyCommunications/colby-slideshow#readme
- Issues: https://github.com/ColbyCommunications/colby-slideshow/issues
- npm.io page: https://npm.io/package/colby-slideshow

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^15.4.2
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.2
- [react-slick](https://npm.io/package/react-slick.md) ^0.14.6

## Recent versions

- 1.0.32 (latest) — 2017-03-09
- 1.0.31 — 2017-03-09
- 1.0.30 — 2017-03-09
- 1.0.29 — 2017-03-09
- 1.0.28 — 2017-03-08
- 1.0.27 — 2017-03-08
- 1.0.26 — 2017-03-08
- 1.0.25 — 2017-03-08
- 1.0.24 — 2017-03-08
- 1.0.23 — 2017-03-08
- 1.0.22 — 2017-03-06
- 1.0.21 — 2017-03-06
- 1.0.20 — 2017-03-06
- 1.0.19 — 2017-03-06
- 1.0.18 — 2017-03-06
- … 17 more at https://npm.io/package/colby-slideshow/versions

## README

# Colby Slideshow

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

## Usage

Install with NPM:

~~~javascript
npm install --save colby-slideshow
~~~

Import the Sass file:
~~~scss
// 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:

~~~javascript
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.:

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

~~~php
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 );
~~~

---
_Source: https://npm.io/package/colby-slideshow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._