react awesome slider

React Awesome Slider V3 [New FullPage Navigation Hoc]

react-awesome-slider es un componente React React de producción de 60 fps, altamente personalizable, de producción que hace que un control deslizante/carrusel de la galería de medios (Imagen/Video).

Navegación de página completa hoc

Para usar los hocs de navegación de pantalla completa, consulte los ejemplos GatsbyJS y NextJS en el repositorio de estrategias de página completa RAS.

Puede acceder a la demostración para la navegación de la página completa aquí: fullPage.caferati.me

Uso básico

Uso básico con CSS puro

 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 >
) ; 

Recetas de animación: escala, desplegable, cubo, abierto y otoño.

Para analizar cómo se construyen las animaciones, consulte esta carpeta. Las colaboraciones con las nuevas creativas son bienvenidas, solo abre un PR.

Receta de animación de cubos

Vea más recetas en la carpeta de estilo. Para obtener más recetas de animación, consulte la carpeta de estilo.

 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 >
) ;

Toque habilitado

Demostración en vivo

Consulte el CSS customizer en mi cartera

Archivo figma

Importe el componente directamente en su proyecto FIGMA.

Instalación

 npm install --save react-awesome-slider

o

 yarn add react-awesome-slider

Más ejemplos

Uso básico con objeto de medios

 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' ,
      } ,
    ] }
  />
) ;

Uso básico con módulos CSS

 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 >
) ;

Receta de animación plegable con módulos CSS

Vea más recetas en la carpeta de estilo. Para obtener más recetas de animación, consulte la carpeta de estilo.

Tenga en cuenta que en V3 hay una adición del accesorio animation . El nombre de la animación es la versión Cammel-Cased del archivo CSS de animación.

 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 >
) ;

Usando el hoc de Autoplay con CSS simple

 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 >
) ;

Usando el Hoc subtitulado con CSS simple

 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." ,
      } ,
    ] }
  />
) ; 

Características clave

• Mire y se sienta personalizable y extensible a través de variables SASS y CSS (propiedades personalizadas) (archivo principal SCSS)
• Pre-cargador de medios
• Toque habilitado
• Animaciones de 60 fps
• Recetas de transición animadas
• Extensible a través de componentes hoc de complemento personalizados
• Pantalla completa lograda a través del accesorio fillParent

Accesorios principales

Atributos	Tipo	Por defecto	Descripción
nombre de clase	string	null	Agregue un nombre de clase al contenedor de componentes
cssmódulo	object	null	Objeto del módulo CSS Si elige usar este enfoque de estilo
nombre	string	awesome-slider	Nombre único del control deslizante renderizado. Útil si está navegando entre varias páginas que contiene un componente deslizante.
seleccionado	number	0	Establece la pantalla actual activa/seleccionada
balas	boolean	true	Cuando se establece en True, muestre los controles de bala debajo del control deslizante
Organicrows	boolean	true	Cuando se establece en True, muestre la flecha orgánica next y los controles prev
parada	boolean	false	Cuando se establece en True, el control deslizante llenará las dimensiones del elemento principal. Útil para usarlo en modo de pantalla completa.
infinito	boolean	true	Cuando se establece en True, el control deslizante se comportará en una retirada de moda infinita hasta la primera diapositiva después del último.
startupsen	node	null	Establezca el componente de la pantalla de inicio que se mostrará antes de cargar la primera pantalla. Funciona como una pantalla de precarga.
puesta en marcha	boolean	true	Utilizado junto con startupScreen controla si el StartupScreen debe o no iniciar automáticamente.
transición	number	0	Establece un retraso en ms entre las transiciones de diapositivas. Útil si está esperando una animación de salida para terminar en la diapositiva actual.
mobiletouch	boolean	true	Cuando se establece en True, activa un efecto táctil deslizante para navegar en dispositivos móviles.
botones	boolean	true	Debe representar los botones de navegación izquierdo y derecho predeterminado.
ButtonContentRight	node	null	Agregue contenido como niños del botón correcto.
buttoncontentleft	node	null	Agregue contenido como niños del botón izquierdo.
personalización	node	null	Renderiza contenido adicional al mismo nivel de los botones predeterminados. Útil si desea agregar una capa de navegación de deslizamiento adicional o un elemento de superposición fijo
en el primer puesto	function	null	Llamó a ComponentDidMount pasando la referencia del control deslizante como argumento
enltransitionend	function	null	Pidió en el evento de End de Transición Slider que pasa la referencia del control deslizante como argumento
intransición	function	null	Llamado a la transición deslizante comienza a pasar la referencia del control deslizante como argumento
OntransitionRequest	function	null	Llamado cuando un usuario interactúa con la navegación deslizante (flechas o balas)

Contribuir

Si tiene una idea para una característica o animación que falta, simplemente cree su propia hoc feature o animation style y envíela a través de PR a la carpeta src/components .

Autor

Rafael Caferati

• Consulte el sitio web de mi cartera de desarrolladores web
• Otros proyectos de código abierto @ Code Laboratory
• Un alcance de mi cartera de desarrolladores de trabajo @ Web

Licencia

Mit. Copyright (c) 2018 Rafael Caferati.