Skip to content

happy-func/react-nivo-slider

Repository files navigation

react-nivo-slider

version typescript esm npm bundle size (version) GitHub Repo stars

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