react awesome slider

React Slider Awesome V3 [New Fullpage Naveigation Hoc]

react-awesome-slider é um componente de reação de produção de 60fps, extensível, altamente personalizável, pronto para a produção, que renderiza um controle deslizante/carrossel/carrossel de mídia (imagem/vídeo).

FullPage Naveigation Hoc

Para usar os hocs de navegação em tela cheia, consulte os exemplos GatsbyJS e NextJS no repositório de estratégias de página FullPage do RAS.

Você pode acessar a demonstração da navegação FullPage aqui: FullPage.caferati.me

Uso básico

Uso básico com 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 >
) ; 

Receitas de animação: escala, dobra, cubo, aberto e outono.

Para analisar como as animações são construídas, consulte esta pasta. As colaborações com novas criativas são bem -vindas, apenas abra um PR.

Receita de animação do cubo

Confira mais receitas na pasta estilizada. Para mais receitas de animação, consulte a pasta com 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

Demoção ao vivo

Confira o CSS customizer no meu portfólio

Arquivo figma

Importe o componente diretamente para o seu projeto da figma.

Instalação

 npm install --save react-awesome-slider

ou

 yarn add react-awesome-slider

Mais exemplos

Uso básico com objeto de mídia

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

Receita de animação dobrada com módulos CSS

Confira mais receitas na pasta estilizada. Para mais receitas de animação, consulte a pasta com estilo.

Observe que no V3 há uma adição do suporte animation . O nome da animação é a versão Cammel do arquivo CSS de animação.

 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 o hoc de AutoPlay com CSS simples

 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 o hoc da legenda com CSS simples

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

Principais recursos

• Parece e sinta-se personalizável e extensível por meio de variáveis SASS e CSS (Properties personalizadas) (arquivo principal do SCSS)
• Pré-carregador de mídia
• Toque habilitado
• Animações de 60fps
• Receitas de transição animadas
• Estendível por meio de componentes de hoc de plug -in personalizados
• Tela cheia alcançada através do suporte fillParent

Principais adereços

Atributos	Tipo	Padrão	Descrição
ClassName	string	null	Adicione um nome de classe ao contêiner componente
cssmodule	object	null	Objeto do módulo CSS se você optar por usar esta abordagem de estilo
nome	string	awesome-slider	Nome único do controle deslizante renderizado. Útil se você estiver navegando entre várias páginas que contém um componente deslizante.
selecionado	number	0	Define a tela ativa/selecionada atual
balas	boolean	true	Quando definido como True, mostre os controles de bala embaixo do controle deslizante
Organicarrows	boolean	true	Quando definido como True, mostre a seta orgânica next e os controles prev
FillParent	boolean	false	Quando definido como true, o controle deslizante preencherá as dimensões do elemento pai. Útil para usá-lo no modo de tela cheia.
infinito	boolean	true	Quando definido como True, o controle deslizante se comportará de uma moda infinita, retirando o primeiro slide após o último.
StartupScreen	node	null	O componente da tela de inicialização é mostrado antes da primeira tela ser carregada. Funciona como uma tela de pré-carregamento.
comece	boolean	true	Usado em conjunto com controles startupScreen se a tela inicial deve ou não iniciar automaticamente.
TransitionDelay	number	0	Define um atraso no ms entre as transições do slide. Útil se você estiver esperando uma animação de saída terminar no slide atual.
MOBILETOUCH	boolean	true	Quando definido como True, ativa um efeito de toque de deslizamento para navegar em dispositivos móveis.
botões	boolean	true	Deve renderizar os botões de navegação esquerda e direita padrão.
ButtonContentright	node	null	Adicione o conteúdo como crianças do botão certo.
ButtonContentleft	node	null	Adicione o conteúdo como crianças do botão esquerdo.
CustomContent	node	null	Renderize conteúdo extra no mesmo nível dos botões padrão. Útil se você deseja adicionar uma camada de navegação deslizante extra ou um elemento de sobreposição fixa
OnFirstmount	function	null	Chamou o componentDidmount que passava a referência do slider como argumento
OnTransitionend	function	null	Chamado no evento de extremidade do slider de transição, passando a referência do slider como um argumento
Ontransitivestart	function	null	Chamou a transição deslizante começar a passar a referência do controle deslizante como um argumento
OnTransitionRequest	function	null	Chamado quando um usuário interage com a navegação deslizante (setas ou balas)

Contribuir

Se você tiver uma idéia para um recurso ou animação ausente, basta criar seu próprio hoc feature ou animation style e enviá -lo via PR para a pasta src/components .

Autor

Rafael Caferati

• Confira meu site de portfólio de desenvolvedores da web
• Outros projetos de código aberto @ Code Laboratory
• Um escopo do meu trabalho @ portfólio de desenvolvedores da web

Licença

Mit. Copyright (c) 2018 Rafael Caferati.