# ghostkit/3.3.2/gutenberg/blocks/carousel/index.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.3.2. 69 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.3.2/code/gutenberg/blocks/carousel/index.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.3.2/raw/gutenberg/blocks/carousel/index.js
- Modified: 2024-02-18T18:40:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.3.2/code/gutenberg/blocks/carousel/index.js#L10-L20`.

```javascript
import getIcon from '../../utils/get-icon';
import metadata from './block.json';
import edit from './edit';
import save from './save';

const { name } = metadata;

export { metadata, name };

export const settings = {
	icon: getIcon('block-carousel', true),
	ghostkit: {
		previewUrl: 'https://www.ghostkit.io/docs/blocks/carousel/',
		customStylesCallback(attributes) {
			const { fadeEdges, fadeEdgesSize } = attributes;
			const styles = {
				'--gkt-carousel--fade-edges__size': undefined,
			};

			if (
				fadeEdges &&
				typeof fadeEdgesSize !== 'undefined' &&
				fadeEdgesSize !== ''
			) {
				styles['--gkt-carousel--fade-edges__size'] =
					`${fadeEdgesSize}%`;
			}

			return styles;
		},
	},
	example: {
		attributes: {
			slides: 3,
		},
		innerBlocks: [
			{
				name: 'ghostkit/carousel-slide',
				innerBlocks: [
					{
						name: 'core/image',
						attributes: {
							sizeSlug: 'large',
							url: 'https://s.w.org/images/core/5.3/MtBlanc1.jpg',
						},
					},
				],
			},
			{
				name: 'ghostkit/carousel-slide',
				innerBlocks: [
					{
						name: 'core/image',
						attributes: {
							sizeSlug: 'large',
							url: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg',
						},
					},
				],
			},
			{
				name: 'ghostkit/carousel-slide',
			},
		],
	},
	edit,
	save,
};

```