react-nivo-slider

Getting Started

Install dependencies,

$ npm i react-nivo-slider

Docs & Demo

Github Pages

Usage

import React from 'react';
import { Image, Link, Swiper } from 'react-nivo-slider';
import 'react-nivo-slider/es/style';
import 'react-nivo-slider/es/style/default';
import { NemoJpg, ToyStoryJpg, UpJpg, WalleJpg } from './img';

const logger = (msg: string) => () => console.log(msg);

export default function DefaultDemo() {
  return (
    <Swiper>
      <Link href="https://www.surpath.net.cn">
        <Image src={NemoJpg} alt="image1" onClick={logger('bad event handler')} />
      </Link>
      <Image
        src={ToyStoryJpg}
        alt="image2"
        title="image2"
        onClick={logger('image2 Clicked')}
      />
      <Image src={WalleJpg} alt="image3" onClick={logger('image3 Clicked')} />
      <Image src={UpJpg} alt="image4" onClick={logger('image4 Clicked')} />
    </Swiper>
  );
}

API

Swiper props

| props | description | type | default | | :-- | :-- | :-- | :-- | | className | - | string | - | | style | - | CSSProperties | - | | theme | theme | default | light | dark | bar | default | | effect | transition effect | EffectType | random | | slices | swiper slice | number | 15 | | boxCols | box col num | number | 8 | | boxRows | - | number | 4 | | animSpeed | animation duration(ms) | number | 500 | | pauseTime | - | number | 3000 | | startSlide | - | number | 0 | | directionNav | show directionNav | boolean | true | | controlNav | show controlNav | boolean | true | | controlNavThumbs | show controlNavThumbs | boolean | false | | pauseOnHover | - | boolean | true | | manualAdvance | - | boolean | false | | prevText | prev button text | string | Prev | | nextText | next button text | string | nextText | | randomStart | - | boolean | false | | beforeChange | before slide change | function | - | | afterChange | after slide change | function | - | | afterLoad | after swiper init | function | - | | lastSlide | before last slide start animation | function | - | | slideshowEnd | on last slide show | function | - |

useSwiper

| props | description | type | default | | :-- | :-- | :-- | :-- | | width | swiper width | number | - | | activeIndex | - | number | - | | slides | swiper slides | React.ReactElement<any, string | React.JSXElementConstructor>[] | [] | | slideTo | slide to target slide | (index: number) => void | - | | slideNext | slide to next slide | () => void | - | | slidePrev | slide to prev slide | () => void | - |

Image

| props | description | type | default | | :-- | :-- | :-- | :-- | | className | - | string | - | | style | - | CSSProperties | - | | alt | - | string | - | | title | caption inner text or node | string | node | - | | transition | - | EffectType | - | | thumb | thumb image src when controlNavThumbs it's true | string | - | | onClick | - | () => void | - |

Link

same as a tag

EffectType

type EffectType =
  | `random`
  | `fade`
  | `fold`
  | `sliceDown`
  | `sliceDownRight`
  | `sliceDownLeft`
  | `sliceUp`
  | `sliceUpRight`
  | `sliceUpLeft`
  | `sliceUpDown`
  | `sliceUpDownLeft`
  | `sliceUpDownRight`
  | `slideInRight`
  | `slideInLeft`
  | `boxRandom`
  | `boxRain`
  | `boxRainReverse`
  | `boxRainGrow`
  | `boxRainGrowReverse`;

Support By

Nivo-Slider-jQuery