react awesome slider Download - react awesome slider Source Code Download reagieren

react awesome slider

AI-Quellcode

v3.3.0

Herunterladen

React Awesome Slider V3 [New Fullpage Navigation hoc]

react-awesome-slider ist eine 60-fps, erweiterbare, hochpassbare, produktionsbereite React-Komponente, die eine Mediengalerie-Galerie-Slider/Karussell macht.

FullPage Navigation hoc

Für die Verwendung der Full-Screen-Navigations-Hocs finden Sie die Beispiele GatsbyJS und NextJS auf dem RAS FullPage Strategies Repository.

Für die FullPage Navigation können Sie hier auf die Demo zugreifen: FullPage.caferati.me

React-Awesome-Slider-Demo

Grundnutzung

React-Awesome-Slider-Demo

Grundnutzung mit reinem CSS

 import AwesomeSlider from 'react-awesome-slider' ;
import 'react-awesome-slider/dist/styles.css' ;

const slider = (
  < AwesomeSlider >
    < div > 1 </ div >
    < div > 2 </ div >
    < div > 3 </ div >
    < div > 4 </ div >
  </ AwesomeSlider >
) ;

Animationsrezepte: Scale-out, Ausklapper, Würfel, Öffnen und Herbst.

Um zu analysieren, wie die Animationen erstellt werden, lesen Sie bitte diesen Ordner. Zusammenarbeit mit neuen kreativen sind willkommen. Eröffnen Sie einfach eine PR.

React-Awesome-Slider-Demo

Cube -Animationsrezept

Kasse mehr Rezepte im gestalteten Ordner. Weitere Animationsrezepte finden Sie im gestalteten Ordner.

 import AwesomeSlider from 'react-awesome-slider' ;
import 'react-awesome-slider/dist/custom-animations/cube-animation.css' ;

const slider = (
  < AwesomeSlider animation = "cubeAnimation" >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AwesomeSlider >
) ;

Touch aktiviert

React-Awesome-Slider-Demo

Live -Demo

Checkout des CSS customizer in meinem Portfolio

Figma -Datei

Importieren Sie die Komponente direkt in Ihr Figma -Projekt.

Installation

 npm install --save react-awesome-slider

oder

 yarn add react-awesome-slider

Weitere Beispiele

Grundnutzung mit Medienobjekt

 import AwesomeSlider from 'react-awesome-slider' ;
import 'react-awesome-slider/dist/styles.css' ;

const slider = (
  < AwesomeSlider
    media = { [
      {
        source : '/path/to/image-0.png' ,
      } ,
      {
        source : '/path/to/image-1.png' ,
      } ,
      {
        source : '/path/to/image-2.png' ,
      } ,
    ] }
  />
) ;

Grundnutzung mit CSS -Modulen

 import AwesomeSlider from 'react-awesome-slider' ;
import AwesomeSliderStyles from 'react-awesome-slider/src/styles' ;

const slider = (
  < AwesomeSlider cssModule = { AwesomeSliderStyles } >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AwesomeSlider >
) ;

Ausgeklapptes Animationsrezept mit CSS-Modulen

Kasse mehr Rezepte im gestalteten Ordner. Weitere Animationsrezepte finden Sie im gestalteten Ordner.

Beachten Sie, dass auf V3 eine Hengung der animation -Requisit vorhanden ist. Der Animationsname ist die Cammel-Cased-Version der Animations-CSS-Datei.

 import AwesomeSlider from 'react-awesome-slider' ;
import CoreStyles from 'react-awesome-slider/src/core/styles.scss' ;
import AnimationStyles from 'react-awesome-slider/src/styled/fold-out-animation/fold-out-animation.scss' ;

const slider = (
  < AwesomeSlider
    animation = "foldOutAnimation"
    cssModule = { [ coreStyles , animationStyles ] }
  >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AwesomeSlider >
) ;

Verwenden des Autoplay -hoc mit einfachem CSS

 import AwesomeSlider from 'react-awesome-slider' ;
import withAutoplay from 'react-awesome-slider/dist/autoplay' ;
import 'react-awesome-slider/dist/styles.css' ;

const AutoplaySlider = withAutoplay ( AwesomeSlider ) ;

const slider = (
  < AutoplaySlider
    play = { true }
    cancelOnInteraction = { false } // should stop playing on user interaction
    interval = { 6000 }
  >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AutoplaySlider >
) ;

Verwenden des captionierten hoc mit einfachem CSS

 import AwesomeSlider from 'react-awesome-slider' ;
import withCaption from 'react-awesome-slider/dist/captioned' ;
import 'react-awesome-slider/dist/styles.css' ;
import 'react-awesome-slider/dist/captioned.css' ;

const CaptionedSlider = withCaption ( AwesomeSlider ) ;

const component = (
  < CaptionedSlider
    startupScreen = { StartupScreen }
    cssModule = { CaptionedStyles }
    screens = { [
      {
        backgroundColor : '#4a9c8c' ,
        media : '/images/series/ricknmorty-3.png' ,
        caption : 'I want to see what you got.' ,
      } ,
      {
        backgroundColor : '#4a9c8c' ,
        media : '/images/series/ricknmorty-3.png' ,
        caption : "The answer is -- Don't think about it." ,
      } ,
    ] }
  />
) ;

Schlüsselmerkmale

Schauen Sie über SASS- und CSS-Variablen (benutzerdefinierte Properties) (SCSS-Hauptdatei) anpassbar und erweiterbar.
Medienvorlader
Touch aktiviert
60fps Animationen
Animierte Übergangsrezepte
Erweiterbar über benutzerdefinierte Plugin -hoc -Komponenten
Vollbildschirme, der durch die fillParent -Stütze erreicht wird

Hauptrequisiten

Attribute	Typ	Standard	Beschreibung
Klassenname	`string`	`null`	Fügen Sie dem Komponentenbehälter einen Klassennamen hinzu
CSSMODULE	`object`	`null`	CSS -Modulobjekt Wenn Sie diesen Styling -Ansatz verwenden
Name	`string`	`awesome-slider`	Eindeutiger Name des gerenderten Schiebereglers. Nützlich, wenn Sie zwischen mehreren Seiten navigieren, die eine Schiebereglerkomponente enthalten.
ausgewählt	`number`	`0`	Legt den aktuellen aktiven/ausgewählten Bildschirm fest
Kugeln	`boolean`	`true`	Wenn Sie auf True eingestellt sind, zeigen Sie die Kugelsteuerungen unter dem Schieberegler
Organikarrows	`boolean`	`true`	Wenn Sie auf True eingestellt sind, zeigen Sie den organischen Pfeil `next` `prev`
Fülle	`boolean`	`false`	Wenn der Schieberegler auf True gesetzt ist, füllt die Dimensionen des übergeordneten Elements. Nützlich, um es im Vollbildmodus zu verwenden.
unendlich	`boolean`	`true`	Wenn sich der Schieberegler auf eine unendliche Art und Weise verhalten, die nach dem letzten auf die erste Folie zurücklebt.
Start -up -Bildschirm	`node`	`null`	Setzen Sie die Startbildschirmkomponente, die angezeigt werden soll, bevor der erste Bildschirm geladen wird. Es funktioniert wie ein Vorladungsbildschirm.
Start-up	`boolean`	`true`	Verwendet zusammen mit `startupScreen` steuert, ob der Startbildschirm automatisch starten sollte oder nicht.
Übergangsdelay	`number`	`0`	Legt eine Verzögerung in `ms` zwischen den Folienübergängen fest. Nützlich, wenn Sie darauf warten, dass eine Exit -Animation in der aktuellen Folie fertiggestellt wird.
Mobiletouch	`boolean`	`true`	Wenn Sie auf True gesetzt sind, aktivieren Sie einen Swipe -Touch -Effekt, um auf mobilen Geräten zu navigieren.
Knöpfe	`boolean`	`true`	Sollte die standardmäßigen linken und rechten Navigationsschaltflächen rendern.
ButtonContentright	`node`	`null`	Fügen Sie Inhalte als Kinder der rechten Taste hinzu.
ButtonContentleft	`node`	`null`	Fügen Sie Inhalte als Kinder der linken Taste hinzu.
CustomContent	`node`	`null`	Rendern Sie zusätzlichen Inhalt auf derselben Ebene der Standardschaltflächen. Nützlich, wenn Sie eine zusätzliche Schieberie -Navigationsebene oder ein festes Overlay -Element hinzufügen möchten
Onfirstmount	`function`	`null`	Aufgerufene KomponentDidmount, die die Slider -Referenz als Argument übergeben
Ontransitionend	`function`	`null`	Auf dem Slider Transition End -Ereignis aufgerufen
OntransitionStart	`function`	`null`	Aufgerufen auf Slider -Übergang beginnen die Slider -Referenz als Argument zu übergeben
OntransitionRequest	`function`	`null`	Aufgerufen, wenn ein Benutzer mit der Schieberegigation interagiert (Pfeile oder Kugeln)

Beitragen

Wenn Sie eine Idee für eine fehlende Funktion oder Animation haben, stellen Sie einfach Ihre eigene hoc feature oder animation style her und senden Sie sie über PR an den Ordner src/components .