react awesome sliderダウンロード - react awesome sliderソースコードダウンロード

react awesome slider

AI ソースコード

v3.3.0

ダウンロード

React Awesome Slider V3 [新しいフルページナビゲーションHOC]

react-awesome-sliderは、メディア（画像/ビデオ）ギャラリー/カルーセルをレンダリングする60fps、拡張可能、高度にカスタマイズ可能な生産対応のReactコンポーネントです。

フルページナビゲーションHOC

フルスクリーンナビゲーションHOCSを使用するには、RAS FullPage StrategiesリポジトリのGatsbyJSとNextJS例をチェックアウトしてください。

FullPage Navigationのデモにアクセスできます：FullPage.caferati.me

React-Awesome-Sliderデモ

基本的な使用法

React-Awesome-Sliderデモ

純粋な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 >
) ;

アニメーションレシピ：スケールアウト、折りたたみ、キューブ、オープンアンドフォール。

アニメーションの構築方法を分析するには、このフォルダーをご覧ください。新しいクリエイティブなものとのコラボレーションは大歓迎です。PRを開いてください。

React-Awesome-Sliderデモ

キューブアニメーションレシピ

スタイルのフォルダーでその他のレシピをチェックアウトします。その他のアニメーションレシピについては、スタイリングフォルダーをご覧ください。

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

タッチ有効になります

React-Awesome-Sliderデモ

ライブデモ

私のポートフォリオでCSS customizerをチェックアウトします

figmaファイル

コンポーネントをFIGMAプロジェクトに直接インポートします。

インストール

 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の小道具が添付されていることに注意してください。アニメーション名は、Animation CSSファイルのCammel-Casedバージョンです。

 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を使用して自動再生HOCを使用します

 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メインファイル）
メディアプレローダー
タッチ有効になります
60fpsアニメーション
アニメーショントランジションレシピ
カスタムプラグインHOCコンポーネントを介して拡張可能
fillParent小道具を通して達成されたフルスクリーン

主な小道具

属性	タイプ	デフォルト	説明
className	`string`	`null`	コンポーネントコンテナにクラス名を追加します
cssmodule	`object`	`null`	CSSモジュールオブジェクトこのスタイリングアプローチを使用することを選択した場合
名前	`string`	`awesome-slider`	レンダリングされたスライダーのユニークな名前。スライダーコンポーネントを含む複数のページ間でナビゲートする場合に便利です。
選択	`number`	`0`	現在のアクティブ/選択された画面を設定します
弾丸	`boolean`	`true`	TRUEに設定すると、スライダーの下に弾丸コントロールが表示されます
オーガニカロ	`boolean`	`true`	TRUEに設定すると、オーガニックアロー`next`表示し、コントロール`prev`
充填物	`boolean`	`false`	Trueに設定すると、スライダーは親要素の寸法を埋めます。フルスクリーンモードで使用するのに役立ちます。
無限	`boolean`	`true`	Trueに設定すると、スライダーは、最後のスライドの後に最初のスライドに戻す無限のファッションで動作します。
StartupScreen	`node`	`null`	最初の画面がロードされる前に表示されるスタートアップ画面コンポーネントを設定します。プレロード画面のように機能します。
起動する	`boolean`	`true`	`startupScreen`と一緒に使用すると、StartupScreenが自動スタートするかどうかが制御されます。
TransitionDelay	`number`	`0`	スライド遷移間で`ms`の遅延を設定します。 Exitアニメーションが現在のスライドで終了するのを待っている場合に便利です。
MobileTouch	`boolean`	`true`	Trueに設定すると、スワイプタッチ効果がアクティブになり、モバイルデバイスをナビゲートします。
ボタン	`boolean`	`true`	デフォルトの左右のナビゲーションボタンをレンダリングする必要があります。
ButtonContentRight	`node`	`null`	適切なボタンの子供としてコンテンツを追加します。
ButtonContentLeft	`node`	`null`	左ボタンの子供としてコンテンツを追加します。
CustomContent	`node`	`null`	デフォルトボタンの同じレベルで追加のコンテンツをレンダリングします。追加のスライダーナビゲーションレイヤーまたは固定オーバーレイ要素を追加する場合に役立ちます
onfirstmount	`function`	`null`	componentdidmountにスライダーリファレンスを引数として渡すように呼び出されます
ontransitionEnd	`function`	`null`	スライダートランジションエンドイベントで、スライダーリファレンスを引数として渡すことで呼び出されます
ontransitionstart	`function`	`null`	スライダートランジションが引数としてスライダーリファレンスの渡され始めたと呼ばれる
OntransitionRequest	`function`	`null`	ユーザーがスライダーナビゲーション（矢印または弾丸）と対話するときに呼び出されます