diff --git a/package-lock.json b/package-lock.json index 3016c59..8419ff8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-slideshow-image", - "version": "4.0.5", + "version": "4.1.0", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index d3ce038..d7b6053 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slideshow-image", - "version": "4.0.5", + "version": "4.1.0", "description": "An image slideshow with react", "license": "MIT", "main": "dist/index.js", diff --git a/src/fadezoom.tsx b/src/fadezoom.tsx index 4f8e139..a7467c0 100644 --- a/src/fadezoom.tsx +++ b/src/fadezoom.tsx @@ -92,8 +92,12 @@ export const FadeZoom = React.forwardRef((props, ref) = goBack: () => { moveBack(); }, - goTo: (index: number) => { - moveTo(index); + goTo: (index: number, options?: { skipTransition?: boolean }) => { + if (options?.skipTransition) { + setIndex(index); + } else { + moveTo(index); + } }, })); diff --git a/src/slide.tsx b/src/slide.tsx index 2876af7..c255cf5 100644 --- a/src/slide.tsx +++ b/src/slide.tsx @@ -106,8 +106,12 @@ export const Slide = React.forwardRef((props, ref) => goBack: () => { moveBack(); }, - goTo: (index: number) => { - moveTo(index); + goTo: (index: number, options?: { skipTransition?: boolean }) => { + if (options?.skipTransition) { + setIndex(index); + } else { + moveTo(index); + } }, })); diff --git a/src/types.ts b/src/types.ts index c98784d..8956d87 100644 --- a/src/types.ts +++ b/src/types.ts @@ -70,5 +70,5 @@ export type TweenEasingFn = (amount: number) => number; export type SlideshowRef = { goNext: () => void; goBack: () => void; - goTo: (index: number) => void; + goTo: (index: number, options?: { skipTransition?: boolean }) => void; }; diff --git a/stories/Methods.mdx b/stories/Methods.mdx index acb470d..182d959 100644 --- a/stories/Methods.mdx +++ b/stories/Methods.mdx @@ -6,7 +6,8 @@ import { Slide } from '../src'; ## Methods Slides The package supports three methods that can be used to control navigation. The `goBack()` method shows the previous slide while `goNext()` shows the next slide. -The `goTo(index)` method goes to a particular index. It takes an integer as the parameter. +The `goTo(index)` method goes to a particular index. It takes an integer as the parameter. You can also pass a second parameter of options e.g `{ skipTransition: true }`. This +will ensure that the next index shows without any transition ```tsx import React from 'react';