react awesome slider

React Awesome Slider V3 [新的FullPage Navigation HOC]

react-awesome-slider是60fps，可扩展的，高度可定制的生产React React组件，可呈现媒体（Image/Video）Gallery Slider/carousel。

全页导航事件

对于使用全屏导航HOC，请在RAS FullPage策略存储库中查看GatsbyJS和NextJS示例。

您可以在此处访问完整页面导航的演示：fullpage.caferati.me

基本用法

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

动画食谱：扩展，折叠，立方体，开放和秋季。

要分析动画的构建方式，请查看此文件夹。欢迎与新创意的合作，只需开设公关即可。

立方体动画食谱

在样式文件夹上查看更多食谱。有关更多动画食谱，请查看样式的文件夹。

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

触摸启用

现场演示

在我的投资组合中查看CSS customizer

无花果文件

将组件直接导入您的无花果项目。

安装

 npm install --save react-awesome-slider

或者

 yarn add react-awesome-slider

更多例子

媒体对象的基本用法

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

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

使用CSS模块折叠动画食谱

在样式文件夹上查看更多食谱。有关更多动画食谱，请查看样式的文件夹。

请注意，在V3上， animation道具有一个aDition。动画名称是动画CSS文件的CAMMEL的版本。

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

使用平原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 >
) ;

使用平原CSS使用字幕的HOC

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

关键功能

• 通过SASS和CSS变量（自定义范围）（SCSS Main File）外观和感觉可自定义和扩展
• 媒体预加载器
• 触摸启用
• 60fps动画
• 动画过渡食谱
• 可通过自定义插件HOC组件扩展
• 通过fillParent道具实现的全屏

主要道具

属性	类型	默认	描述
className	string	null	将ClassName添加到组件容器
CSSMODULE	object	null	CSS模块对象如果选择使用这种样式方法
姓名	string	awesome-slider	渲染滑块的唯一名称。如果您在包含滑块组件的多个页面之间导航，有用。
选定	number	0	设置当前活动/选择的屏幕
子弹	boolean	true	设置为TRUE显示在滑块下方的子弹控件
有机龙	boolean	true	设置为真实显示有机箭头和next prev控件
填充物	boolean	false	设置为true时，滑块将填充父元素的尺寸。在全屏模式下使用它有用。
无限	boolean	true	当设置为真时，滑块将在最后一个幻灯片上的无限时装上行为。
启动屏幕	node	null	SET是在加载第一个屏幕之前将要显示的启动屏幕组件。它的工作方式就像预加载屏幕。
启动	boolean	true	与startupScreen控件一起使用，是否应自动启动启动屏幕。
TransitionDelay	number	0	在幻灯片转换之间设置ms的延迟。如果您正在等待出口动画在当前幻灯片中完成。
MobileTouch	boolean	true	设置为TRUE时，会激活滑动触摸效果以在移动设备上导航。
按钮	boolean	true	应呈现默认的左右导航按钮。
ButtonContentRight	node	null	将内容添加为正确的按钮的孩子。
纽扣	node	null	添加内容为左键的孩子。
CustomContent	node	null	在默认按钮的相同级别上渲染额外的内容。如果要添加额外的滑块导航层或固定的覆盖元素，有用
Onfirstmount	function	null	在componentDidmount中调用将滑块引用作为参数
Ontransitionend	function	null	在滑块过渡结束事件中调用滑块作为参数
OntransitionStart	function	null	在滑块过渡时开始将滑块引用作为参数传递
OntransitionRequest	function	null	当用户与滑块导航（箭头或子弹）交互时调用

贡献

如果您对缺少功能或动画有一个想法，只需制作自己的hoc feature或animation style ，然后通过PR将其发送到src/components文件夹。

作者

拉斐尔·卡夫拉蒂（Rafael Caferati）

• 结帐我的Web开发人员投资组合网站
• 其他开源项目 @代码实验室
• 我的工作范围 @ Web开发人员投资组合

执照

麻省理工学院。版权（C）2018 Rafael Caferati。