react awesome slider

반응 멋진 슬라이더 v3 [새로운 풀 페이지 내비게이션 HOC]

react-awesome-slider 는 60fps, 확장 가능하며 고도로 사용자 정의 가능하며 프로덕션 Ready React 구성 요소로 미디어 (이미지/비디오) 갤러리 슬라이더/회전식을 렌더링합니다.

풀 페이지 내비게이션 HOC

전체 화면 내비게이션 HOC를 사용하려면 RAS FullPage 전략 저장소에서 GatsbyJS 및 NextJS 예제를 확인하십시오.

FullPage Navigation의 데모에 액세스 할 수 있습니다. 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 확인하십시오

무화과 파일

구성 요소를 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 소품의 낙상이 있습니다. 애니메이션 이름은 Aimation 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와 함께 자동 재생 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 변수 (Custom-Properties)를 통해 외관 및 느낌 사용자 정의 가능하고 확장 가능합니다 (SCSS 기본 파일)
• 미디어 프리 로더
• 터치 활성화
• 60fps 애니메이션
• 애니메이션 전환 레시피
• 사용자 정의 플러그인 HOC 구성 요소를 통해 확장 가능
• fillParent Prop을 통해 전체 화면이 달성되었습니다

메인 소품

속성	유형	기본	설명
클래스 이름	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로 설정되면 슬라이더는 마지막 슬라이드 이후의 첫 번째 슬라이드를 유지하는 무한한 방식으로 행동합니다.
스타트 업 스크린	node	null	세트는 첫 번째 화면이로드되기 전에 표시 될 시작 화면 구성 요소입니다. 사전로드 화면처럼 작동합니다.
스타트 업	boolean	true	startupScreen 컨트롤과 함께 시작 스크린이 자동 시작 해야하는지 여부에 관계없이 사용됩니다.
TransitionDelay	number	0	슬라이드 전환 사이의 ms 지연을 설정합니다. 출구 애니메이션이 현재 슬라이드에서 완료되기를 기다리는 경우 유용합니다.
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	사용자가 슬라이더 내비게이션 (화살표 또는 총알)과 상호 작용할 때 호출

기여하다

누락 된 기능 또는 애니메이션에 대한 아이디어가 있으면 자신의 hoc feature 이나 animation style 제작하고 PR을 통해 src/components 폴더로 보내십시오.

작가

라파엘 카페 라티

• 내 웹 개발자 포트폴리오 웹 사이트를 확인하십시오
• 기타 오픈 소스 프로젝트 @ 코드 실험실
• 내 작업의 범위 @ 웹 개발자 포트폴리오

특허

MIT. 저작권 (C) 2018 Rafael Caferati.