JSPM

  • Created
  • Published
  • Downloads 7
  • Score
    100M100P100Q29433F
  • License ISC

A dynamic, configurable full screen background with optional overlay.

Package Exports

  • infinite-zoom-fader
  • infinite-zoom-fader/dist/cjs/index.js
  • infinite-zoom-fader/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (infinite-zoom-fader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Infinite Zoom Fader

A lightweight, dynamic and configurable image slideshow React component.

Installation

npm i infinite-zoom-fader

yarn add infinite-zoom-fader

Import the component into your project

import { InfiniteZoomFader } from "infinite-zoom-fader";

Example

import { InfiniteZoomFader } from "infinite-zoom-fader";
import { images } from "./images";

const App = () => {
  const zoomConfig = {
    zoom: "out",
    zoomScale: 0.5,
    zoomTime: 10,
    zoomMax: 0.25,
    transitionTime: 1,
  };

  return (
    <InfiniteZoomFader images={images} zoomConfig={...zoomConfig} />
  );
};

export default App;

Props

images: An array of objects containing your image sources and alt texts. zoomConfig: An object containing the component configuration.

zoomConfig.zoom: 'in' or 'out' zoomConfig.zoomMax: number between 0 and 1 zoomConfig.zoomScale: number between 0 and 1 zoomConfig.zoomTime: number zoomConfig.transitionTime: number

License

MIT