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。