Reagujúci komponent pre prezentáciu obrázkov podporujúci posúvanie, blednutie a priblíženie

Blog

Reagujúci komponent pre prezentáciu obrázkov podporujúci posúvanie, blednutie a priblíženie

Reagovať-prezentácia

Jednoduchá súčasť prezentácie postavená na reakcii, ktorá podporuje efekty posúvania, blednutia a priblíženia



Inštalácia

npm install react-slideshow-image -S yarn add react-slideshow-image

Pri prezentácii môžete použiť tri rôzne efekty. Skontrolovať demo



Slide efekt

source-js import React from 'react'; import { Slide } from 'react-slideshow-image'; const slideImages = [ 'images/slide_2.jpg'>css loader and style loader to your webpack config

webpack.config.js



source-js { module: { rules: [ { test: /.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] } ] } } 

Pre tých, ktorí používajú | _+_ | , toto by mal byť váš | _+_ | príkaz, aby ste sa vyhli chybám pri importovaní súborov css do uzlových modulov

next.config.js

Next.js

Na nadradený div budú použité vlastnosti HTML ako className, atribúty data-* a ďalšie

Vlastnosti

Vlastnosti Napíšte Predvolená hodnota Popis
trvanie celé číslo 5 000 Čas (milisekundy) trvá, než sa začne ďalší prechod
transitionDuration celé číslo 1000 Určuje, ako dlho trvá prechod
defaultIndex celé číslo 0 Určuje prvú snímku, ktorá sa má zobraziť
nekonečný booleovský pravda Určuje, či sa má prechod opakovať
ukazovatele booleovský falošný Slúži na určenie, či by sa pod prezentáciou mali nachádzať bodky
mierka číslo Požadovaný pri použití priblíženia na určenie mierky, na ktorú sa má aktuálna snímka priblížiť
šípky booleovský pravda Určuje, či by mala existovať navigačná šípka na prechod na nasledujúcu alebo predchádzajúcu snímku
automatické prehrávanie booleovský pravda Je zodpovedný za určenie, či sa má prezentácia spustiť automaticky
onChange funkciu Spätné volanie, ktoré sa spustí na konci každého prechodu. OldIndex a newIndex sa odosielajú ako argumenty

Metódy

  1. goNext () Slúži na programový prechod snímky na nasledujúci.

  2. goBack () Ak chcete zobraziť predchádzajúcu snímku, použite túto funkciu

  3. goTo (index) Môže sa použiť na prechod snímky na konkrétny index. Index N.B začína od 0

Na zavolanie metódy môžete použiť atribút ref snímky a potom zavolať metódu. | _+_ |

Podrobnosti na stiahnutie:

GitHub: https://github.com/femioladeji/react-slideshow

#reactjs #javascript #programming